骑自行车如何导航:JavaScript判断浏览器类型及版本

　　Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3

　　Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12 其中,版本号是Firefox之后的数字.

　　Opera

　　Opera提供了专门的浏览器标志,就是window.opera属性.

　　Opera典型的userAgent如下：

　　Opera/9.27 (Windows NT 5.2; U; zh-cn)

　　Opera/8.0 (Macintosh; PPC Mac OS X; U; en)

　　Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0

　　其中,版本号是靠近Opera的数字.

　　Safari

　　Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志.

　　Safari典型的userAgent如下：

　　Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13

　　Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

　　其版本号是Version之后的数字.

　　Chrome

　　Chrome有一个MessageEvent函数,但Firefox也有.不过,好在Chrome并没有Firefox的getBoxObjectFor函数,根据这个条件还是可以准确判断出Chrome浏览器的.

　　目前,Chrome的userAgent是：

　　Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

　　其中,版本号在Chrome之后的数字.

　　有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧.

　　Navigator

　　目前,Navigator的userAgent是：

　　Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080219 Firefox/2.0.0.12 Navigator/9.0.0.6

　　其中,版本号在Navigator之后的数字.

　　通过观察以上各浏览器的差异,可以用JavaScript区分出各浏览器的,但没有判断是否兼容w3c标准,看了看ExtJs的源代码,发现其中就有对浏览器类型以及版本和操作系统的判断.

　　源码如下：

　　ua = navigator.userAgent.toLowerCase(),

　　check = function(r){

　　return r.test(ua);

　　},

　　isStrict = document.compatMode == “CSS1Compat”,

　　isOpera = check(/opera/),

　　isChrome = check(/chrome/),

　　isWebKit = check(/webkit/),

　　isSafari = !isChrome && check(/safari/),

　　isSafari3 = isSafari && check(/version/3/),

　　isSafari4 = isSafari && check(/version/4/),

　　isIE = !isOpera && check(/msie/),

　　isGecko = !isWebKit && check(/gecko/),

　　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/)

　　关于document.compatMode

　　IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode.为兼容性考虑,我们可能需要获取当前的文档渲染方式.

　　document.compatMode正好派上用场,它有两种可能的返回值：BackCompat和CSS1Compat,对其解释如下：

　　BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

　　CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

　　在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了.在ExtJs中的代码：isBorderBox=isIE&&!isStrict.

　　当文档有了标准声明时, document.compatMode 的值就等于 “CSS1compat”, 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明

　　var height = document.compatMode==”CSS1Compat” ? document.documentElement.clientHeight : document.body.clientHeight;