js判断浏览器类型和版本

原网址：http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html

除了另无它法，肯定不使用navigator.userAgent来判定浏览器。因为在第一次浏览器大战初期，Netscape占绝对统计地位，大部分人们不愿意兼容其他浏览器，并通过检测其UA让他们的网站只允许Netscape访问，这就逼使其他浏览器（包括IE）修改自己的UA伪装成Netscape来通过那些自以为是的脚本，于是出现每个人都声称自己是别人的局面，即使最新的IE9的UA也是:

//Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

下面我收集或独创的一些判定：

//IE8 新特征一览： http://www.cnblogs.com/rubylouvre/articles/1716755.html

//2010 4 16日更新

        ie678 = !+"\v1" ;

        ie678 = !-[1,];//IE9预览版中失效

        ie678 ='\v'=='v' ;

        ie678 = ('a~b'.split(/(~)/))[1] == "b"

        ie678 = 0.9.toFixed(0) == "0"

        IE8 = window.toStaticHTML

        IE9 = window.msPerformance

        IE6-10 = !!document.createStyleSheet

        ie = !!document.recalc

        ie = !!window.VBArray

        ie = !!window.ActiveXObject

        ie678 = 0//@cc_on+1;

        ie = !!window.createPopup;

        ie = /*@cc_on!@*/!1;

        ie = document.expando;//document.all在opera firefox的古老版本也存在

        ie = /\w/.test('\u0130') //由群里的abcd友情提供

        

        ie6 = !"1"[0] //利用IE6或IE5的字符串不能使用数组下标的特征

        ie8 = !!window.XDomainRequest;

        ie9 =  document.documentMode && document.documentMode === 9;

        //自创，基于条件编译的嗅探脚本，IE会返回其JS引擎的版本号，非IE返回0

        var ieVersion = eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1

        ie9 = ieVersion === 5.9

        ie8 = ieVersion === 5.8

        ie7 = ieVersion === 5.7

        ie6 = ieVersion === 5.6

        ie5 = ieVersion === 5.5

        isIE11 =navigator.userAgent.indexOf("re:11")>0

        //https://developer.mozilla.org/En/Windows_Media_in_Netscape

        netscape = !!window.GeckoActiveXObject

        gecko  = !!window.netscape //包括firefox

        firefox = !!window.Components

        firefox = !!window.updateCommands

        firefox = !!window.sidebar

        safari = !!(navigator.vendor && navigator.vendor.match(/Apple/))

        safari = window.openDatabase && !window.chrome;

        chrome= !!(window.chrome && window.google)

        opera=!!window.opera ;

        wpIE = 'msmaxtouchpoints' in window.navigator //判定当前是否在IE的移动版中

        //傲游2 3

        maxthon = /maxthon/i.test(navigator.userAgent)

        //360安全浏览器

        is360se = /360se/i.test(navigator.userAgent)

//2010.6.4

       setTimeout(function(){//FF的setTimeout总是有一个额余的参数0

          var isFF = !!arguments.length;

          alert(isFF)

        }, 0);

//判定IE版本

2010.10.1

      ie = (function(undefined){

        var v = 3, div = document.createElement('div');

        while (

        div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',

        div.getElementsByTagName('i')[0]);

        return v> 4 ? v : undefined;

      }());

//判定IE版本 2011.2.24 IE 条件注释在

       ie = (function() {

          var v = 3, div = document.createElement('div');

          while (div.innerHTML = '<!--[if gt IE '+(++v)+']>1<![endif]-->', div.innerHTML);

          return v > 4 ? v : !v;

        }());

//手机的相关判定 2011.9.21

 isIPhone = /iPhone/i.test(navigator.userAgent);

 isIPhone4 = window.devicePixelRatio >= 2

//在网页中，pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone 4是2，有些Android机型是1.5

//http://blog.webcreativepark.net/2011/01/25-173502.html

var ua =  navigator.userAgent;

isAndroid = /Android/i.test(ua);

isBlackBerry = /BlackBerry/i.test(ua)

isWindowPhone = /IEMobile/i.test(ua)

isIOS = /iPhone|iPad|iPod/i.test(ua)

isMobile = isAndroid || isBlackBerry || isWindowPhone || isIOS

 

if(window.external+"" == "undefined" || window.external == undefined)

        {

            //网站不能识别你的浏览器 不支持window.external 很可能为360浏览器

            browseInfo.extend   = "360SE";

            browseInfo.name     = "360浏览器";

        }

var pf = (navigator.platform || "").toLowerCase(),

        ua = navigator.userAgent.toLowerCase(),

        s;

function toFixedVersion(ver, floatLength) {

    ver = ("" + ver).replace(/_/g, ".");

    floatLength = floatLength || 1;

    ver = String(ver).split(".");

    ver = ver[0] + "." + (ver[1] || "0");

    ver = Number(ver).toFixed(floatLength);

    return ver;

}

 

function updateProperty(target, name, ver) {

    target = QApp[target]

    target.name = name;

    target.version = ver;

    target[name] = ver;

}

// 提供三个对象,每个对象都有name, version(version必然为字符串)

// 取得用户操作系统名字与版本号，如果是0表示不是此操作系统

var platform = QApp.platform = {

    name: (window.orientation != undefined) ? 'iPod' : (pf.match(/mac|win|linux/i) || ['unknown'])[0],

    version: 0,

    iPod: 0,

    iPad: 0,

    iPhone: 0,

    android: 0,

    win: 0,

    linux: 0,

    mac: 0

};

 

(s = ua.match(/windows ([\d.]+)/)) ? updateProperty("platform", "win", toFixedVersion(s[1])) :

        (s = ua.match(/windows nt ([\d.]+)/)) ? updateProperty("platform", "win", toFixedVersion(s[1])) :

        (s = ua.match(/linux ([\d.]+)/)) ? updateProperty("platform", "linux", toFixedVersion(s[1])) :

        (s = ua.match(/mac ([\d.]+)/)) ? updateProperty("platform", "mac", toFixedVersion(s[1])) :

        (s = ua.match(/ipod ([\d.]+)/)) ? updateProperty("platform", "iPod", toFixedVersion(s[1])) :

        (s = ua.match(/ipad[\D]*os ([\d_]+)/)) ? updateProperty("platform", "iPad", toFixedVersion(s[1])) :

        (s = ua.match(/iphone ([\d.]+)/)) ? updateProperty("platform", "iPhone", toFixedVersion(s[1])) :

        (s = ua.match(/android ([\d.]+)/)) ? updateProperty("platform", "android", toFixedVersion(s[1])) : 0;

//============================================

//取得用户的浏览器名与版本,如果是0表示不是此浏览器

var browser = QApp.browser = {

    name: "unknown",

    version: 0,

    ie: 0,

    firefox: 0,

    chrome: 0,

    opera: 0,

    safari: 0,

    mobileSafari: 0,

    adobeAir: 0 //adobe 的air内嵌浏览器

};

 

(s = ua.match(/trident.*; rv\:([\d.]+)/)) ? updateProperty("browser", "ie", toFixedVersion(s[1])) : //IE11的UA改变了没有MSIE

        (s = ua.match(/msie ([\d.]+)/)) ? updateProperty("browser", "ie", toFixedVersion(s[1])) :

        (s = ua.match(/firefox\/([\d.]+)/)) ? updateProperty("browser", "firefox", toFixedVersion(s[1])) :

        (s = ua.match(/chrome\/([\d.]+)/)) ? updateProperty("browser", "chrome", toFixedVersion(s[1])) :

        (s = ua.match(/opera.([\d.]+)/)) ? updateProperty("browser", "opera", toFixedVersion(s[1])) :

        (s = ua.match(/adobeair\/([\d.]+)/)) ? updateProperty("browser", "adobeAir", toFixedVersion(s[1])) :

        (s = ua.match(/version\/([\d.]+).*safari/)) ? updateProperty("browser", "safari", toFixedVersion(s[1])) : 0;

 

//下面是各种微调

//mobile safari 判断，可与safari字段并存

(s = ua.match(/version\/([\d.]+).*mobile.*safari/)) ? updateProperty("browser", "mobileSafari", toFixedVersion(s[1])) : 0;

 

if (platform.iPad) {

    updateProperty("browser", 'mobileSafari', '0.0');

}

 

if (browser.ie) {

    if (!document.documentMode) {

        document.documentMode = Math.floor(browser.ie)

        //http://msdn.microsoft.com/zh-cn/library/cc817574.aspx

        //IE下可以通过设置 <meta http-equiv="X-UA-Compatible" content="IE=8">改变渲染模式

        //一切以实际渲染效果为准

    } else if (document.documentMode !== Math.floor(browser.ie)) {

        updateProperty("browser", "ie", toFixedVersion(document.documentMode))

    }

}

//============================================

//取得用户浏览器的渲染引擎名与版本,如果是0表示不是此浏览器

QApp.engine = {

    name: 'unknown',

    version: 0,

    trident: 0,

    gecko: 0,

    webkit: 0,

    presto: 0

};

 

(s = ua.match(/trident\/([\d.]+)/)) ? updateProperty("engine", "trident", toFixedVersion(s[1])) :

        (s = ua.match(/gecko\/([\d.]+)/)) ? updateProperty("engine", "gecko", toFixedVersion(s[1])) :

        (s = ua.match(/applewebkit\/([\d.]+)/)) ? updateProperty("engine", "webkit", toFixedVersion(s[1])) :

        (s = ua.match(/presto\/([\d.]+)/)) ? updateProperty("engine", "presto", toFixedVersion(s[1])) : 0;

 

if (QApp.browser.ie) {

    if (QApp.browser.ie == 6) {

        updateProperty("engine", "trident", toFixedVersion("4"));

    } else if (browser.ie == 7 || browser.ie == 8) {

        updateProperty("engine", "trident", toFixedVersion("5"));

    }

}

//by 司徒正美

//thanks to

//https://github.com/kissyteam/kissy/blob/master/src/ua/src/ua.js

//https://github.com/AlloyTeam/JX/blob/master/src/jx.browser.js

//判定浏览器是否支持某些重要特性

require("avalon")

QApp.support = {

    //判定是否支持CSS3的transition, animation,支持返回可用的属性名,不支持返回null

    //https://github.com/jquery/jquery-mobile/blob/master/js/animationComplete.js

    cssTransition: avalon.cssName("transition"),

    cssAnimation: avalon.cssName("animation"),

    cssAnimation3D: transform3dTest(),

    //判定是否支持伪元素

    cssPseudoElement: !!avalon.cssName("content"),

    //现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。

    //使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为

    cssPointerEvents: cssPointerEventsTest(),

    boxShadow: !!avalon.cssName("boxShadow"),

    //http://stackoverflow.com/questions/15906508/chrome-browser-for-android-no-longer-supports-webkit-overflow-scrolling-is-the

    touchOverflow: !!avalon.cssName("overflow-scrolling"),

    //要弄明media query,先要了解一下media type，其实这个大家会比较熟悉一点，

    //我们通常会用到的media type会是all 和screen，然后是print，

    //一些网站会专门通过print类型为页面的打印格式提供更友好的界面。

    //media type的浏览器支持

    //* IE5.5/6/7不支持在@import中使用媒体类型

    //* Safari/firefox只支持all,screen,print三种类型(包括iphone)

    //* Opera 完全支持

    //* Opera mini  支持handheld，未指定则使用screen

    //* Windows Mobile系统中的IE支持handheld，其它支持不明…

    //media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。

    //     @media screen and (min-width:1024px) and (max-width:1280px){

    //          body{font-size:medium;}

    //     }

    //详见 http://www.qianduan.net/media-type-and-media-query.html

    mediaquery: mediaTest("only all"),

    //https://github.com/jquery/jquery-mobile/blob/master/js/support/touch.js

    touch: "ontouchend" in document,

    //HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。

    //这些方法可以协同window.onpopstate事件一起工作。

    //https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

    pushState: "pushState" in history &&

            "replaceState" in history &&

            // When running inside a FF iframe, calling replaceState causes an error

            !(window.navigator.userAgent.indexOf("Firefox") >= 0 && window.top !== window) &&

            (window.navigator.userAgent.search(/CriOS/) === -1),

    boundingRect: typeof document.documentElement.getBoundingClientRect !== "undefined",

    orientation: "orientation" in window && "onorientationchange" in window,

    fixedPosition: true, //下面会修正

    //http://stackoverflow.com/questions/5539354/svg-for-images-in-browsers-with-png-fallback

    inlineSVG:!! (window.SVGAngle && document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") )

 

}

 

 

 

var matchMedia = window.matchMedia || (function(doc, undefined) {

    var bool,

            docElem = doc.documentElement,

            refNode = docElem.firstElementChild || docElem.firstChild,

            // fakeBody required for <ff4 when="" executed="" in="" <head="">

            fakeBody = doc.createElement("body"),

            div = doc.createElement("div");

 

    div.id = "mq-test-1";

    div.style.cssText = "position:absolute;top:-100em";

    fakeBody.style.background = "none";

    fakeBody.appendChild(div);

 

    return function(q) {

 

        div.innerHTML = "­<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";

 

        docElem.insertBefore(fakeBody, refNode);

        bool = div.offsetWidth === 42;

        docElem.removeChild(fakeBody);

 

        return {

            matches: bool,

            media: q

        };

 

    };

 

}(document));

 

var mediaTest = function(q) {

    return matchMedia(q).matches;

};

 

function cssPointerEventsTest() {

    var element = document.createElement("x"),

            documentElement = document.documentElement,

            getComputedStyle = window.getComputedStyle,

            supports;

 

    if (!("pointerEvents" in element.style)) {

        return false;

    }

 

    element.style.pointerEvents = "auto";

    element.style.pointerEvents = "x";

    documentElement.appendChild(element);

    supports = getComputedStyle &&

            getComputedStyle(element, "").pointerEvents === "auto";

    documentElement.removeChild(element);

    return !!supports;

}

 

//http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support

function transform3dTest() {

    var mqProp = "transform-3d",

            // Because the `translate3d` test below throws false positives in Android:

            ret = mediaTest("(-" + vendors.join("-" + mqProp + "),(-") + "-" + mqProp + "),(" + mqProp + ")"),

            el, transforms, t;

 

    if (ret) {

        return !!ret;

    }

 

    el = document.createElement("div");

    transforms = {

        // We’re omitting Opera for the time being; MS uses unprefixed.

        "MozTransform": "-moz-transform",

        "transform": "transform"

    };

 

    fakeBody.append(el);

 

    for (t in transforms) {

        if (el.style[ t ] !== undefined) {

            el.style[ t ] = "translate3d( 100px, 1px, 1px )";

            ret = window.getComputedStyle(el).getPropertyValue(transforms[ t ]);

        }

    }

    return (!!ret && ret !== "none");

}

 

//判定当前浏览器是否支持position:fiexed

new function() {

    var test = document.createElement('div'),

            control = test.cloneNode(false),

            fake = false,

            root = document.body || (function() {

                fake = true;

                return document.documentElement.appendChild(document.createElement('body'));

            }());

 

    var oldCssText = root.style.cssText;

    root.style.cssText = 'padding:0;margin:0';

    test.style.cssText = 'position:fixed;top:42px';

    root.appendChild(test);

    root.appendChild(control);

 

    QApp.support.positionfixed = test.offsetTop !== control.offsetTop;

 

    root.removeChild(test);

    root.removeChild(control);

    root.style.cssText = oldCssText;

 

    if (fake) {

        document.documentElement.removeChild(root);

    }

}

new function() {

    var test = document.createElement('div'),

            ret, fake = false,

            root = document.body || (function() {

                fake = true;

                return document.documentElement.appendChild(document.createElement('body'));

            }());

 

    if (typeof document.body.scrollIntoViewIfNeeded === 'function') {

 

        var oldCssText = root.style.cssText,

                testScrollTop = 20,

                originalScrollTop = window.pageYOffset;

 

        root.appendChild(test);

 

        test.style.cssText = 'position:fixed;top:0px;height:10px;';

 

        root.style.height = "3000px";

 

        /* avoided hoisting for clarity */

        var testScroll = function() {

            if (ret === undefined) {

                test.scrollIntoViewIfNeeded();

                if (window.pageYOffset === testScrollTop) {

                    ret = true;

                } else {

                    ret = false;

                }

            }

            window.removeEventListener('scroll', testScroll, false);

        }

 

        window.addEventListener('scroll', testScrollTop, false);

        window.setTimeout(testScroll, 20); // ios 4 does'nt publish the scroll event on scrollto

        window.scrollTo(0, testScrollTop);

        testScroll();

 

        root.removeChild(test);

        root.style.cssText = oldCssText;

        window.scrollTo(0, originalScrollTop);

 

    } else {

        ret = QApp.support.positionfixed; // firefox and IE doesnt have document.body.scrollIntoViewIfNeeded, so we test with the original modernizr test

    }

 

    if (fake) {

        document.documentElement.removeChild(root);

    }

 

    QApp.support.iospositionfixed = ret;

}

</ff4>