JavaScript判断浏览器类型及版本

　　JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下，值判断出浏览器类型之后，还需判断浏览器版本才能处理兼容性问题，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。

　　navigator对象

　　包含了正在使用的 Navigator 的版本信息。 JavaScript 客户端运行时刻引擎自动创建 navigator 对象。

　　属性概览

　　appCodeName 指定浏览器的代码名称。

　　appName 指定浏览器的名称。

　　appVersion 指定 Navigator 的版本信息。

　　language 标明正在使用的 Navigator 的翻译语种。

　　mimeTypes 客户端支持的所有 MIME 类型数组。

　　platform 标明了 Navigator 编译适合的机器类型。

　　plugins 客户端已安装的所有插件数组。

　　userAgent 指定了用户代理头。

　　方法概览

　　javaEnabled 测试是否允许 Java。

　　plugins.refresh 使新安装的插件有效，并可选重新装入已打开的包含插件的文档。

　　preference 允许一个已标识的脚本获取并设置特定的 Navigator 参数。

　　taintEnabled 指定是否允许数据污点。

　　简单标注一下，判断浏览器的名称可以根据appName判断，例如：

　　var ie=navigator.appName == “Microsoft Internet Explorer” ? true : false;

　　浏览器的特征及其userAgent

　　简单罗列如下：

　　IE

　　只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。

　　而IE各个版本典型的userAgent如下：

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

　　Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)

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

　　Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

　　其中，版本号是MSIE之后的数字。

　　Firefox

　　Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。

　　这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。

　　Firefox几个版本的userAgent大致如下：

　　Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1

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

　　isIE7 = isIE && check(/msie 7/),

　　isIE8 = isIE && check(/msie 8/),

　　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;