有趣的浏览器检测

在写跨浏览器的js程序中，检测浏览器是一个很重要的工作。我们不时要为不同的浏览器写分支代码。如下是一种：

 

//添加事件工具函数
function addEvent(el,type,handle){
	if(el.addEventListener){//for standard browses
		el.addEventListener(type,handle,false);
	}else if(el.attachEvent){//for IE
		el.attachEvent("on"+event,handle);
	}else{//other
		el["on"+type]=handle;
	}

}

 

1，第一种检测浏览器方式称为 user-agent 检测方式。是最古老的，它检测目标浏览器的确切型号，包括浏览器的名称和版本。其实就是一个字符串，用navigator.userAgen或navigator.appName获取。如下：

 

function isIE(){
	return navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all;
}
function isIE6() {
	return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;
}
function isIE7(){
	return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 7.0")=="-1"?false:true;
}
function isIE8(){
	return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 8.0")=="-1"?false:true;
}
function isNN(){
	return navigator.userAgent.indexOf("Netscape")!=-1;
}
function isOpera(){
	return navigator.appName.indexOf("Opera")!=-1;
}
function isFF(){
	return navigator.userAgent.indexOf("Firefox")!=-1;
}
function isChrome(){
	return navigator.userAgent.indexOf("Chrome") > -1;  
}

 

 

2，第二种称为 对象/特征 检测方式，这是一种判断浏览器能力的方式，也是目前流行的方式。即在使用一个对象之前检测它是否存在。上面提到的addEvent方法中就使用了该方式。.addEventListener是w3c dom标准方式，而IE使用自己特有attachEvent。以下列举几个：

a，talbe.cells只有IE/Opera支持。

b，innerText/insertAdjacentHTML除Firefox外，IE6/7/8/Safari/Chrome/Opera都支持。

c，window.external.AddFavorite用来在IE下添加到收藏夹。

d，window.sidebar.addPanel用来在FF下添加到收藏夹。

 

3，第三种很有趣，暂且称为 浏览器缺陷或bug 方式，即某些表现不是浏览器厂商刻意实现的。如下：

 

var isIE = !+"\v1";
var isIE = !-[1,];
var isIE = "\v"=="v";
isSafari=/a/.__proto__=='//';
isOpera=!!window.opera;

 

最经典的莫过于 !-[1,] 的判断方式，目前最少代码判断IE的方式，只需6个byte。这是个俄国人 发现的。利用了数组[1,]的length。还有来自英国的年轻 James Padolsey 利用IE条件注释

var ie = (function(){
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');
 
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    ); 
    return v > 4 ? v : undef
}());

 

被称为史上最有创意的IE判断。

 

 

注1：isIE = "\v" == "v" 方式IE9已经修复该bug，不能用此方式判断IE浏览器了(2010-6-29用IE9 pre3测试的)

 

 

 

评论

15 楼 madsion8875 2010-10-13  

不错，thanks

14 楼 jimoshutong 2010-08-27  

个人感觉这些方法都或多或少有点小问题，有没有一种很好的方法呢，能写一个通用的检测方法。

13 楼 jundy 2010-03-06  

还是用常规的比较好，最简洁的不一定是最好的

12 楼 s海若 2010-03-03  

第三种方法确实让人眼前一亮，是非常俏皮的技巧。
但是效果正如CSS hack,还是少用的好。

11 楼 s海若 2010-03-03  

rainsilence 写道

var ua = navigator.userAgent.toLowerCase(),
    check = function(r){
            return r.test(ua);
    },
    isOpera = check(/opera/),
    isChrome = check(/\bchrome\b/),
    isWebKit = check(/webkit/),
    isSafari = !isChrome && check(/safari/),
    isSafari2 = isSafari && check(/applewebkit\/4/),
    isSafari3 = isSafari && check(/version\/3/),
    isSafari4 = isSafari && check(/version\/4/),
    isIE = !isOpera && check(/msie/),
    isIE7 = isIE && check(/msie 7/),
    isIE8 = isIE && check(/msie 8/),
    isIE6 = isIE && !isIE7 && !isIE8,
    isGecko = !isWebKit && check(/gecko/),
    isGecko2 = isGecko && check(/rv:1\.8/),
    isGecko3 = isGecko && check(/rv:1\.9/),
    isBorderBox = isIE && !isStrict,
    isWindows = check(/windows|win32/),
    isMac = check(/macintosh|mac os x/),
    isAir = check(/adobeair/),
    isLinux = check(/linux/)

简洁，简单

Ext 的UA嗅探确实简洁明了。特性检测肯定是最无敌的招数。但是结果就是代码里充斥着各种If, Else.值不值得呢？是个问题。

10 楼 yvonxiao 2010-03-02  

某些情况下还是要特性判断结合下userAgent，像要统计客户端浏览器的具体的种类(比如那些用了ie内核的浏览器比如傲游或者360之类)的时候，就只好从userAgent里找关键字了

9 楼 Amar 2010-03-02  

学习一下。

8 楼 rainchen 2010-03-02  

userAgent 探测有个问题是，如果用户用userAgent的工具更改的话，探测结果会被误导。

这种情况用特性判断比较好，不管userAgent怎么变，浏览器的本质都是不变的

7 楼 yuyue618 2010-03-02  

jquery都已经舍去这种检查方法. 改用特性检测.

6 楼 rainsilence 2010-03-01  

var ua = navigator.userAgent.toLowerCase(),
    check = function(r){
            return r.test(ua);
    },
    isOpera = check(/opera/),
    isChrome = check(/\bchrome\b/),
    isWebKit = check(/webkit/),
    isSafari = !isChrome && check(/safari/),
    isSafari2 = isSafari && check(/applewebkit\/4/),
    isSafari3 = isSafari && check(/version\/3/),
    isSafari4 = isSafari && check(/version\/4/),
    isIE = !isOpera && check(/msie/),
    isIE7 = isIE && check(/msie 7/),
    isIE8 = isIE && check(/msie 8/),
    isIE6 = isIE && !isIE7 && !isIE8,
    isGecko = !isWebKit && check(/gecko/),
    isGecko2 = isGecko && check(/rv:1\.8/),
    isGecko3 = isGecko && check(/rv:1\.9/),
    isBorderBox = isIE && !isStrict,
    isWindows = check(/windows|win32/),
    isMac = check(/macintosh|mac os x/),
    isAir = check(/adobeair/),
    isLinux = check(/linux/)

简洁，简单

5 楼 EldonReturn 2010-03-01  

如果想自己做个库啥的
还是进行嗅探后，统一到一个逻辑document对象上在调用比较方便吧

4 楼 aoliwen521 2010-03-01  

咋一看，没看懂。有空慢慢研究。

3 楼 Army 2010-03-01  

如果要判断浏览器，推荐做法是UA嗅探。

如果是在使用某一特性之前的检测，推荐做法是特性检测。

最后，特性检测并非浏览器检测。

2 楼 xinyu198736 2010-02-26  

lz,提醒一下,user-agent检测的ie版本不准确,经常出错

1 楼 cloudgamer 2010-02-26  

我的工具库里是这样检测的：

    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";