作者：丁宗秋

标准参考

无。

问题描述

由于各浏览器的渲染引擎和脚本引擎的实现存在差异，为保证页面在各浏览器下的最大兼容性，判别浏览器类型或版本就显得非常有必要。但如果因判断方法不当而导致判断失误，将产生预料外的问题。

造成的影响

该问题将导致脚本不能按照预期的效果执行，甚至出现错误。

受影响的浏览器

所有浏览器

问题分析

1. 判别浏览器类型或版本的依据

当页面内的代码涉及到各浏览器的特性时，只有知道当前浏览器的类型，我们才能准确的调用对应的接口、使用对应的属性等，以实现所需的功能。

判别浏览器类型或版本的方法大至有以下两类：

1. 通过分析 navigator 对象的相关属性。包括 appName、appVersion 和 userAgent。其中 userAgent 使用最广泛。
2. 利用特定属性在各浏览器下的支持差异来区分浏览器类型。比如 document.all、window.attachEvent、window.addEventListener、window.opera 等。

2. BOM 中 navigator 对象属性说明

BOM 的全称是 Browser Object Model（浏览器对象模型），是与浏览器相关的一组对象。BOM 是没有相关标准的，每个浏览器都有自己的实现方式。

各浏览器下 navigator 对象各属性的返回值：

	appVersion	userAgent
IE6	4.0 (compatible; MSIE 6.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)	Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
IE7	4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)	Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
IE8	4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Firefox	5.0 (Windows; zh-CN)	Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.2) Gecko/20100316 Firefox/3.6.2
Chrome	5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.3 (KHTML, like Gecko) Chrome/5.0.356.2 Safari/533.3	Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.3 (KHTML, like Gecko) Chrome/5.0.356.2 Safari/533.3
Safari	5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10	Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10
Opera	9.80 (Windows NT 5.1; U; zh-cn)	Opera/9.80 (Windows NT 5.1; U; zh-cn) Presto/2.2.15 Version/10.10

其它的 navigator 属性返回值如下：

	IE	Firefox	Chrome	Safari	Opera
product	无	Gecko	Gecko	Gecko	无
productSub	无	20100316	20100317	20100317	无
appName	Microsoft Internet Explorer	Netscape	Netscape	Netscape	Opera
language	无	zh-CN	zh-CN	zh-CN	zh-CN
userLanguage	zh-cn	无	无	无	无

总结以上两张表中 navigator 各属性在各浏览器下所呈现的差异，我们发现：

• navigator.userAgent 包含的信息最多，最适合用来分析判别浏览器类型和版本。
• navigator.product 在 Firefox Chrome Safari 下返回值都为 "Gecko" ，其它浏览器下不支持该属性。
• navigator.appName 在 Firefox Chrome Safari 下返回值都为 "Netscape" 。
• 浏览器语言信息 IE 下使用 navigator.userLanguage ，非 IE 下使用 navigator.language 。假设所有浏览器都为中文版本，在 Firefox Chrome Safari 下返回 "zh-CN" ，IE Opera 下返回 "zh-cn"（注意大小写）。

3. 各种判别方式及可能产生的问题

采用不适当的 navigator 属性来判断浏览器类型或版本，将无法准确区分不同类型的浏览器，如 navigator 的 appName 属性。

使用某个或某几个浏览器才支持的属性也能区分浏览器类型，如 window.sessionStorage、window.clipboardData 或 document.all 等。但如果将某一类浏览器一概而论，也可能会出现问题。

不管采用哪种方式来判断浏览器的类型，我们的终极目标都是为了获得最大的兼容性。下面，我们列举一些常见的由浏览器类型引起的问题：

3.1 仅考虑 IE 的判别

var is_ie = navigator.appName.indexOf("Microsoft") != -1; if(is_ie){ ... // 针对IE }

IE Only 的代码，导致非 IE 下相应功能不可用。作者将非 IE 用户做遗弃处理¹。

注：
1. 有些特性仅有 IE 支持，在这种情况下，以上做法是正确的。

3.2 非 IE 下一概而论

if(document.all){ ... // 针对IE }else{ ... // 除IE外一概而论 }

Firefox Chrome Safari Opera 之间彼此也存在兼容性问题，不能一概而论。

3.3 使用 navigator.appName 判别浏览器类型

if(navigator.appName == "Netscape"){ ... // 针对 Firefox 的代码块 }else{ ... // 针对 IE 的代码块 }

这种判断粒度仍然太粗，主流浏览器不只是 IE 和 Firefox。

并且 Firefox Chrome Safari 下 navigator.appName 值都等于 "Netscape"，类似的情况还包括 navigator.product，它在 Firefox Chrome Safari 下的值都为 "Gecko"。和 3.2 中的问题一样，这几个浏览器之间也存在兼容性问题。

3.4 遗漏某些主流浏览器

var uA = navigator.userAgent; if(uA.indexOf('Opera')!=-1){ ... // 针对 Opera }else
                if(uA.indexOf('Firefox')!=-1){ ... // 针对 Firefox }else if(uA.indexOf('MSIE')!=-1){ ... // 针对 IE }

以上代码将 Chrome Safari 的用户遗弃。

解决方案

1. 1、浏览器类型或版本判别推荐采用分析 navigator.userAgent 属性的方式。
2. 2、在写代码时，考虑主流浏览器 IE Firefox Chrome Safari Opera 的兼容性。

参见

知识库

• ...

相关问题

• ...