EXT jQuery 如何检测浏览器及版本

来源:互联网 发布:网络流量控制器软件 编辑:程序博客网 时间:2024/05/17 02:37
判断浏览器类型及操作系统平台不算一个什么难题,但要做到短小精悍,那还是有些难度,看了Ext的代码觉得其代码的优秀之一就是代码的短小精悍,以尽可能精简的代码去实现一些操作。
这里摘录了Ext.js中关于浏览器类型及操作系统平台的代码,这段代码包含了很全面的关于浏览器和操作系统类型判断,而且代码也非常的精简,应该从中好好学习下:

var ua = navigator.userAgent.toLowerCase();

var isStrict = document.compatMode == "CSS1Compat",
isOpera = ua.indexOf("opera") > -1,
isSafari = (/webkit|khtml/).test(ua),
isIE = !isOpera && ua.indexOf("msie") > -1,
isIE7 = !isOpera && ua.indexOf("msie 7") > -1,
isGecko = !isSafari && ua.indexOf("gecko") > -1,
isBorderBox = isIE && !isStrict,
isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
isLinux = (ua.indexOf("linux") != -1),
isSecure = window.location.href.toLowerCase().indexOf("https") === 0;



使用过 jQuery 的朋友都知道,使用 jQuery 本身的 brower 方法就可以准确的判断用户在使用那种浏览器甚至是版本。好的开发库使用者都想了解其中的一些其实现机制,那么,jQuery 是如何做到这些的?

查看 jQuery 最新的源代码(版本 1.2.2),在第 1195 行至 1205 行,是它的判断浏览器的函数。正如你所看见的,jQuery 使用的是上述第二种方法,即使用 user-agent 判断用户的浏览器和版本。

坦白说,起先我对短短的五行代码就可以判断浏览器的种类和版本感到非常的惊奇。在《Javascript 高级程序设计》一书中,作者甚至使用单独的章节描述的如何使用 Javascript 判断浏览器和操作系统。但通过阅读其代码(其实并不难),我顿时有中恍然大悟的感觉。废话不多说,贴上代码。

var userAgent = navigator.userAgent.toLowerCase();



// Figure out what browser is being used

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(Windows edition)

... AppleWebKit/523.12.9 (KHTML, like Gecko) Version/3.0 Safari/523.12.9

Opera(Opera 9.2 on Windows XP)

Opera/9.24 (Windows NT 5.1; U; zh-cn)

Mozilla(Firefox 2.0.11 on Windows XP)

... Windows NT 5.1; zh-CN; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Internet Explorer (7.0 on Windows XP)

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

jQuery 非常巧妙的使用各浏览器各自不同的 user-agent 特性作为判断。比如 Safari 中 “/webkit/” 是专有的、“/opera/” 也是只有 Opera 浏览器特有等等。这种验证方法可以在目前主流的浏览器上面,基本都可以准确判断。