js 判断各种浏览器的方法与比较

    作为一个前端开发人员，真的无数次被这些各种各样的浏览器搞得头大，曾经不止一次地想，要是只有那么一种浏览器该有多好，还曾经想过，ie6要是不出现该有多好……

    浏览器有两种判断方法，一种是基于navigator.userAgent，另外一种就是js对象判断方法

  使用js对象来判断浏览器的方法，虽然在速度上比用正则表达式分析userAgent要来的快，不过这些特征可能会随浏览器版本而变化。比如，一种浏览器本来独有的特性取得了市场上的成功，其他浏览器也就可能跟着加入该特性，从而使该浏览器的独有特征消失，导致我们的判断失败。因此，相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型和浏览器版本。很多js框架也都是这样做的。

IE

1.基于navigator.userAgent方法

ie其中几个版本的userAgent如下：

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

易见，里面都含有字符串"msie"，你可以使用这个测试，但是opera的有的老版本里面也含有这个字符串，所以你就要多加一个判断，字符串里面不含有opera就ok了

判断版本也就好弄了，msie后面跟着的就是它的版本号，使用正则表达式，很容易判断的。

msie: /msie/.test(userAgent) && !/opera/.test(userAgent),

2.基于js对象方法（ie9没有广泛普及，就暂时头一个小懒，不做讨论啦^_^）

  ie支持创建ActiveX控件，所以可以通过判断window.ActiveXObject来判断是否是ie，ie6不支持XMLHttpRequest对象，在ie6下面使用ajax用的是ActiveXObject；ie8支持document.documentMode，而ie7不支持，则代码如下：

var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
var isIE8 = isIE && !!document.documentMode;
var isIE7 = isIE && !isIE6 && !isIE8;

FireFox

1.基于navigator.userAgent方法

firefox其中几个版本的userAgent如下：

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.18) Gecko/20110319Firefox/3.5.18

Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1

Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3

里面只要含有"firefox"字符串，即可判断是火狐浏览器啦，版本号即紧跟着Firefox/后面的数字

firefox: /firefox/.test(userAgent),

2.基于js对象方法

Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox.

if(document.getBoxObjectFor)  isFireFox=true;

 
Opera

1.基于navigator.userAgent方法

ie其中几个版本的userAgent如下：
Opera/9.80(X11; Linux x86_64; U; pl) Presto/2.7.62 Version/11.00

Opera/9.80(X11; Linux i686; U; it) Presto/2.7.62 Version/11.00

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; fr) Opera11.00

特点也很明显，字符串里面都含有"opera"，所以，你可以放心使用，而且也没有别的浏览器里面含有"opera"这个字符串。版本号是与"Opera“相距最近的数字，虽然三个有一点与众不同，但还是可以判断出来地。

opera: /opera/.test(userAgent),

2.基于js对象方法

opera有一个专门的浏览器标志对象，winodw.opera使用这个判断就ok

if(winodw.opera) isOpera=true;

 

Safari

1.基于navigator.userAgent方法

ie其中几个版本的userAgent如下：

Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-HK) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_5; de-de) AppleWebKit/534.15+ (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4

Mozilla/5.0 (Windows; U; Windows NT 6.1; ja-JP) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16

Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/533.17.8 (KHTML, like Gecko) Version/5.0.1 Safari/533.17.8

safari的userAgent字符串和chrom很像，他俩都是基于”webkit“的浏览器，不过chrom的含有”chrom“字符串，其版本号是Version之后的数字，所以，我们知道如果判断”chrom就ok了“，safrai的版本号与其他的不太相同，他的版本号是与version最相近的数字。

safari: /webkit/.test(userAgent) && !/chrome/.test(userAgent)

2.基于js对象方法

Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志

if(window.openDatabase) isSafrai=true;

 

Chrome

1.基于navigator.userAgent方法

ie其中几个版本的userAgent如下：

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.204 Safari/534.16

Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.16 Safari/534.24

呵呵，你知道怎么判断了吧，对了，就是含有”chrome“就ok了,版本号就跟在chrome后面的那个数字就是

2.基于js对象方法

Chrome有一个MessageEvent函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，根据这个条件还是可以准确判断出Chrome浏览器的。

if(window.MessageEvent && !document.getBoxObjectFor)  isChrome=true;

附加：版本获取

var B = (function(ua){
    var b = {
        msie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
    };
    var vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
    }
    b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
   
    b.ie = b.msie;
    b.ie6 = b.msie && parseInt(b.version, 10) == 6;
    b.ie7 = b.msie && parseInt(b.version, 10) == 7;
    b.ie8 = b.msie && parseInt(b.version, 10) == 8;
   
    return b;
})(window.navigator.userAgent.toLowerCase());