十月 30th, 2009

Javascript浏览器判断终极技巧

428 views, Javascript, 前端设计, by hitigon.

频道系统缓慢进行中,今天完善了一下有关效果变化的JS,都比较简单,但之前Chrome发生了问题一直没有去解决,用alert和try发现原来是我的浏览器判断函数出现了问题,chrome下出现了奇怪的未定义错误。还好,一直想找一个完整的浏览器判断方法。

浏览器判断其实并不被推崇,大多数方法都是用到了navigator.userAgent,容易出现问题、判断错误,很多高手推荐功能判断而不是版本判断。恩,不过有情况下直接能判断出浏览器和版本号确实会很方便,很多Js库也是提供了一些类似的浏览器判断方法。

好吧,看看我从网上找来的……注释有些是我添加的,是对原作者代码的测试结果

【10-31  14:12 进行了更新,对IE条件编译部分进行了修正】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ie = !+"\v1" ; //可行
ie ='\v'=='v' ;//可行,以前用过,传说最短的判断IE代码,貌似没上面那条短
ie = 0//@cc_on+1;//不可行,这样写就会语法错误了,我修改如下
ie = 0/*@cc_on+1@*/;
ie = !!top.execScript;//Chrome也支持,所以不能用
ie = /*@cc_on!@*/!1;//可行,条件编译
ie8 = !!window.XDomainRequest;//可行

//如果是IE,会返回6,7,8代表ie6,ie7,ie8,否则返回1
IEVersion = (" " + (/*@cc_on @_jscript_version  @*/-1)).slice(-1)//可用

//基于条件编译的嗅探脚本,还有如下几个:(实际使用这些都有错误)
IE8=@cc_on @_jscript_version == 5.8 ? true : @false
IE7=@cc_on @_jscript_version == 5.7 ? true : @false
IE6=@cc_on @_jscript_version == 5.6 ? true : @false
IE55=@cc_on @_jscript_version == 5.5 ? true : @false
//10-31添加
//我进行了改写,测试可行
ie6 = /*@cc_on @_jscript_version == 5.6 ||@*/false;
ie7 = /*@cc_on @_jscript_version == 5.7 ||@*/false;
ie8 = /*@cc_on @_jscript_version == 5.8 ||@*/false;
ie5 = /*@cc_on @_jscript_version == 5.5 ||@*/false;

ff = /a/[-1]=='a';//可行
//下面不推荐了,ff2的代码在ff3也能通过,再加上除IE外的浏览器版本判断并不重要
ff3 = (function  x(){})[-5]=='x';
ff2 = (function x(){})[-6]=='x';

safari=/a/.__proto__=='//';//可行
safari = window.openDatabase;//不可行,chrome也支持

chrome=/source/.test((/a/.toString+''));//可行

opera=!!window.opera ;//这个很熟悉了
opera=/^function (/.test([].sort);//不可行……

下面是作者提供的判断函数,未测试,看起来ff测试就不准确了

1
2
B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':
/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'

作者还给出了EXT的相关代码,权当一个参考吧,这是传统的判断方法,但很全面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ua = navigator.userAgent.toLowerCase(),
check = function(r){
return r.test(ua);
},
isOpera = check(/opera/);
isChrome = check(/chrome/);
isWebKit = check(/webkit/);
isSafari = !isChrome && check(/safari/);
isSafari2 = isSafari && check(/applewebkit\/4/);// unique to Safari 2
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/);

最流行的Jquery也有,但1.3内好像没有支援chrome,想看的朋友,打开JS看一下吧,就不帖出来了

然后是我整理的代码

1
2
3
4
5
6
7
8
9
10
11
12
browsers : {
ieVer : (" " + (/*@cc_on @_jscript_version  @*/-1)).slice(-1),
ie5 : /*@cc_on @_jscript_version == 5.5 ||@*/false,
ie6 : /*@cc_on @_jscript_version == 5.6 ||@*/false,
ie7 : /*@cc_on @_jscript_version == 5.7 ||@*/false,
ie8 : /*@cc_on @_jscript_version == 5.8 ||@*/false,
ie : '\v'=='v',
ff : /a/[-1]=='a',
safari : /a/.__proto__=='//',
chrome : /source/.test((/a/.toString+'')),
opera : !!window.opera
}

还有我之前在chrome中出现错误的方法,可以看到例如ie判断还是比较实用的,因为ActiveXObject仅在ie下有效,而这个方法也结合了版本判断(但注意代码中有错误!

1
2
3
4
5
ie : window.ActiveXObject ? navigator.userAgent.toLowerCase().match(/msie ([\d.]+)/)[1] : 0,
firefox : document.getBoxObjectFor ? navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/)[1] : 0,
chrome : window.MessageEvent && !document.getBoxObjectFor ? navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/)[1] : 0,
safari : window.openDatabase ? navigator.userAgent.toLowerCase().match(/version\/([\d.]+)/)[1] : 0,
opera : window.opera ? navigator.userAgent.toLowerCase().match(/opera.([\d.]+)/)[1] : 0

Ok,总结了很多,实际上不同浏览器的私有属性和方法很多,可以慢慢挖掘,找到更好的方法,或者干脆摆脱这些判断函数,当然前提是你对各个浏览器十分了解拥有很强的JS编程功底。

文中部分内容转载自:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html 感谢原作者的无私奉献

补充:有关Js条件编译 http://www.blueidea.com/tech/web/2006/3238.asp

Back Top

Responses to “Javascript浏览器判断终极技巧”

  1. 没有任何评论。
  1. 浏览器的特征探测 - AilinTao' Diary (,一月 9, 2010)

    [...] 《Javascript浏览器判断终极技巧》 《JavaScript 判断浏览器类型及版本》 (以上两文总结得都很不错, 只是 [...]

  2. 韶华白首 » Blog Archive » Javascript浏览器判断技巧补充 (,一月 9, 2010)

    [...] 而我的这篇文章   Javascript浏览器判断终极技巧已经落后于现在的浏览器发展,非常惭愧的是当时写上了终极技巧这四个字 [...]

发表回复

Back Top