相信让javascript 和 css 能够让各个浏览器兼容 的问题,都曾使大家郁闷无比,虽然这个问题到目前还没有得到很好的解决,但是至少通过大家不断的摸索,能够总结出了这样和那样的经验
就我个人了解 无非两大类
第一是使用使用浏览器的功能属性。比如检测浏览器是否支持 getElementById 方法就可以使用
if (document.getElementById) {
} else {
}
虽然这样的检测无法得知用户具体使用哪一种浏览器,不过开发者根据浏览器的功能判断是否兼容自己的代码是经得起考验的。
如果关注浏览器的实际功能而不在乎它的实际身份,就可以使用这种方法。
其二,就是使用传统的 user-agent 字符串,这可能是最古老也是最流行的检测方式。虽然从技术角度上说,用户可以更改自己的 user-agent,但是使用它的确能获得一些有用的信息。
话说到此可能有些偏题。使用过 jQuery 的朋友都知道,使用 jQuery 本身的 brower 方法就可以准确的判断用户在使用那种浏览器甚至是版本。好的开发库使用者都想了解其中的一些其实现机制,那么,jQuery 是如何做到这些的?
废话不多说,贴上代码。
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.9Opera(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.11Internet Explorer (7.0 on Windows XP)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)jQuery 非常巧妙的使用各浏览器各自不同的 user-agent 特性作为判断。比如 Safari 中 “/webkit/” 是专有的、“/opera/” 也是只有 Opera 浏览器特有等等。这种验证方法可以在目前主流的浏览器上面,基本都可以准确判断。
就在这里打住了,jQuery 的确是非常优秀的 Javascript 开发框架之一。掌握它可以为自己的开发添加