如何用Javascript检测浏览器似乎是老生常谈的问题。根据本人的经验,使用Javascript检测浏览器无非使用两大类的方法。
其一,是使用使用浏览器的功能属性。比如检测浏览器是否支持getElementById方法就可以使用
if(document.getElementById){
//themethodexists,souseithere
}else{
//dosomethingelse
}
虽然这样的检测无法得知用户具体使用哪一种浏览器,不过开发者根据浏览器的功能判断是否兼容自己的代码是经得起考验的。如果关注浏览器的实际功能而不在乎它的实际身份,就可以使用这种方法。
其二,就是使用传统的user-agent字符串,这可能是最古老也是最流行的检测方式。虽然从技术角度上说,用户可以更改自己的user-agent,但是使用它的确能获得一些有用的信息。
话说到此可能有些偏题。使用过jQuery的朋友都知道,使用jQuery本身的brower方法就可以准确的判断用户在使用那种浏览器甚至是版本。好的开发库使用者都想了解其中的一些其实现机制,那么,jQuery是如何做到这些的?
查看jQuery最新的源代码(版本1.2.2),在第1195行至1205行,是它的判断浏览器的函数。正如你所看见的,jQuery使用的是上述第二种方法,即使用user-agent判断用户的浏览器和版本。
坦白说,起先我对短短的五行代码就可以判断浏览器的种类和版本感到非常的惊奇。在《Javascript高级程序设计》一书中,作者甚至使用单独的章节描述的如何使用Javascript判断浏览器和操作系统。但通过阅读其代码(其实并不难),我顿时有中恍然大悟的感觉。废话不多说,贴上代码。
varuserAgent=navigator.userAgent.toLowerCase();
//Figureoutwhatbrowserisbeingused
jQuery.browser={
version:(userAgent.match(/.+(?:rv|it|ra|ie)[/:]([d.]+)/)||[])[1],
safari:/webkit/.test(userAgent),
opera:/opera/.test(userAgent),
msie:/msie/.test(userAgent)&&!/opera/.test(userAgent),
mozilla:/mozilla/.test(userAgent)&&!/(compatible|webkit)/.test(userAgent)
};
说到这里,其实有经验的Javascript开发人员已经知道了其中的奥秘。是的,jQuery使用的是正则判断浏览器的种类和版本。做得相当的漂亮!
首先它将user-agent统一成小写,然后使用正则逐步的匹配是哪种浏览器。有关正则方面相关的信息,可以参考这里。不过,有人肯定会怀疑这样的判断是否正确。那么我们先来看下下面四个主流浏览器的user-agent:
Safari(Windowsedition)
...AppleWebKit/523.12.9(KHTML,likeGecko)Version/3.0Safari/523.12.9
Opera(Opera9.2onWindowsXP)
Opera/9.24(WindowsNT5.1;U;zh-cn)
Mozilla(Firefox2.0.11onWindowsXP)
...WindowsNT5.1;zh-CN;rv:1.8.1.11)Gecko/20071127Firefox/2.0.0.11
InternetExplorer(7.0onWindowsXP)
Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1)
jQuery非常巧妙的使用各浏览器各自不同的user-agent特性作为判断。比如Safari中“/webkit/”是专有的、“/opera/”也是只有Opera浏览器特有等等。这种验证方法可以在目前主流的浏览器上面,基本都可以准确判断。
就在这里打住了,jQuery的确是非常优秀的Javascript开发框架之一。掌握它的确可以为自己的开发添加不少的乐趣。我会陆续将自己阅读jQuery框架的心得逐一的发上来,请大家关注。