JavaScript客户端检测

检测Web 客户端的手段很多，而且各有利弊。但最重要的还是要知道，不到万不得已，就不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。一言以蔽之，先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。

一、能力检测

最常用也最为人们广泛接受的客户端检测形式是能力检测（又称特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。能力检测的基本模式如下：

if (object.propertyInQuestion){
//使用object.propertyInQuestion
}

举例来说，IE5.0 之前的版本不支持document.getElementById()这个DOM 方法。尽管可以使用非标准的document.all属性实现相同的目的，但IE 的早期版本中确实不存在document.getElementById()。于是，也就有了类似下面的能力检测代码：

function getElement(id){
	if (document.getElementById){
		return document.getElementById(id);
	} else if (document.all){
		return document.all[id];
	} else {
		throw new Error("No way to retrieve element!");
	}
}

要理解能力检测，首先必须理解两个重要的概念:
1、第一个概念就是先检测达成目的的最常用的特性；
2、第二个重要的概念就是必须测试实际要用到的特性。

1.1 更可靠的能力检测

在可能的情况下，要尽量使用typeof进行能力检测。特别是，宿主对象没有义务让typeof返回合理的值。最令人发指的事就发生在IE 中。大多数浏览器在检测document.createElement()存在时，都会返回true。

//在IE8 及之前版本中不行
function hasCreateElement(){
return typeof document.createElement == "function";
}

在IE8 及之前版本中，这个函数返回false，因为typeof document.createElement返回的是"object"，而不是"function"

关于typeof的行为不标准，IE 中还可以举出例子来。ActiveX 对象（只有IE 支持）与其他对象的行为差异很大。例如，不使用typeof 测试某个属性会导致错误，如下所示。

//在IE 中会导致错误
var xhr = new ActiveXObject("Microsoft.XMLHttp");
if (xhr.open){ //这里会发生错误
//执行操作
}

像这样直接把函数作为属性访问会导致JavaScript 错误。使用typeof 操作符会更靠谱一点，但IE对typeof xhr.open会返回"unknown"。这就意味着，在浏览器环境下测试任何对象的某个特性是否存在，要使用下面这个函数。

//作者：Peter Michaux
function isHostMethod(object, property) {
	var t = typeof object[property];
	return t=='function' ||
	(!!(t=='object' && object[property])) ||
	t=='unknown';
}
可以像下面这样使用这个函数：
result = isHostMethod(xhr, "open"); //true
result = isHostMethod(xhr, "foo"); //false

目前使用isHostMethod()方法还是比较可靠的，因为它考虑到了浏览器的怪异行为。不过也要注意，宿主对象没有义务保持目前的实现方式不变，也不一定会模仿已有宿主对象的行为。所以，这个函数——以及其他类似函数，都不能百分之百地保证永远可靠

1.2 能力检测，不是浏览器检测

检测某个或某几个特性并不能够确定浏览器。下面给出的这段代码（或与之差不多的代码）可以在许多网站中看到，这种“浏览器检测”代码就是错误地依赖能力检测的典型示例。

//错误！还不够具体
var isFirefox = !!(navigator.vendor && navigator.vendorSub);
//错误！假设过头了
var isIE = !!(document.all && document.uniqueID);

实际上，根据浏览器不同将能力组合起来是更可取的方式。如果你知道自己的应用程序需要使用某些特定的浏览器特性，那么最好是一次性检测所有相关特性，而不要分别检测。看下面的例子。

//确定浏览器是否支持Netscape 风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
//确定浏览器是否具有DOM1 级规定的能力
var hasDOM1 = !!(document.getElementById && document.createElement &&
document.getElementsByTagName);

二、怪癖（BUG）检测

与能力检测类似，怪癖检测（quirks detection）的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷（“怪癖”也就是bug）。这通常需要运行一小段代码，以确定某一特性不能正常工作。例如，IE8 及更早版本中存在一个bug，即如果某个实例属性与[[Enumerable]]标记为false的某个原型属性同名，那么该实例属性将不会出现在fon-in循环当中。

三、用户代理检测

3.1 历史（略）

3.2 用户代理字符串检测技术

因此，首先要确定的往往是你需要多么具体的浏览器信息。一般情况下，知道呈现引擎和最低限度的版本就足以决定正确的操作方法了。例如，我们不推荐使用下列代码：

if (isIE6 || isIE7) { //不推荐!!!
//代码
}

这个例子是想要在浏览器为IE6 或IE7 时执行相应代码。这种代码其实是很脆弱的，因为它要依据特定的版本来决定做什么。如果是IE8 怎么办呢？只要IE 有新版本出来，就必须更新这些代码。不过，像下面这样使用相对版本号则可以避免此问题：

if (ieVer >=6){
//代码
}

3.2.1 识别呈现引擎

如前所述，确切知道浏览器的名字和版本号不如确切知道它使用的是什么呈现引擎。如果Firefox、Camino 和Netscape 都使用相同版本的Gecko，那它们一定支持相同的特性。类似地，不管是什么浏览器，只要它跟Safari 3 使用的是同一个版本的WebKit，那么该浏览器也就跟Safari 3 具备同样的功能。

因此，我们要编写的脚本将主要检测五大呈现引擎：IE、Gecko、WebKit、KHTML 和Opera。

为了不在全局作用域中添加多余的变量，我们将使用模块增强模式来封装检测脚本。检测脚本的基本代码结构如下所示：

var client = function(){
var engine = {
//呈现引擎
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
//具体的版本号
ver: null
};
//在此检测呈现引擎、平台和设备
return {
engine : engine
};
}();

这里声明了一个名为client 的全局变量，用于保存相关信息。匿名函数内部定义了一个局部变量engine，它是一个包含默认设置的对象字面量。在这个对象字面量中，每个呈现引擎都对应着一个属性，属性的值默认为0。如果检测到了哪个呈现引擎，那么就以浮点数值形式将该引擎的版本号写入相应的属性。而呈现引擎的完整版本（是一个字符串），则被写入ver 属性。作这样的区分可以支持像下面这样编写代码：

if (client.engine.ie) { //如果是IE，client.ie 的值应该大于0
//针对IE 的代码
} else if (client.engine.gecko > 1.5){
	if (client.engine.ver == "1.8.1"){
	//针对这个版本执行某些操作
	}
}

要正确地识别呈现引擎，关键是检测顺序要正确。我们不相信Opera，是因为（任何情况下）其用户代理字符串（都）不会将自己标识为Opera。要识别Opera，必须得检测window.opera对象。那么，检测呈现引擎代码的第一步，就是编写如下代码：

if (window.opera){
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
}

**应该放在第二位检测的呈现引擎是WebKit。**不过，WebKit 的用户代理字符串中的"AppleWebKit"是独一无二的，因此检测这个字符串最合适。下面就是检测该字符串的示例代码：

var ua = navigator.userAgent;
if (window.opera){
	engine.ver = window.opera.version();
	engine.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.webkit = parseFloat(engine.ver);
}

**接下来要测试的呈现引擎是KHTML。**KHTML 的版本号与WebKit 的版本号在用户代理字符串中的格式差不多，因此可以使用类似的正则表达式。此外，由于Konqueror 3.1 及更早版本中不包含KHTML 的版本，故而就要使用Konqueror 的版本来代替。下面就是相应的检测代码。

var ua = navigator.userAgent;
if (window.opera){
	engine.ver = window.opera.version();
	engine.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.webkit = parseFloat(engine.ver);
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.khtml = parseFloat(engine.ver);
}

与前面一样，由于KHTML 的版本号与后继的标记之间有一个空格，因此仍然要使用特殊的非空格字符来取得与版本有关的所有字符。然后，将字符串形式的版本信息保存在engine.ver中，将浮点数值形式的版本保存在engin.khtml中。如果KHTML 不在用户代理字符串中，那么就要匹配Konqueror后跟一个斜杠，再后跟不包含分号的所有字符。

在排除了WebKit 和KHTML 之后，就可以准确地检测Gecko 了。但是，在用户代理字符串中，Gecko的版本号不会出现在字符串"Gecko"的后面，而是会出现在字符串"rv:"的后面。这样，我们就必须使用一个比前面复杂一些的正则表达式，如下所示。

var ua = navigator.userAgent;
if (window.opera){
	engine.ver = window.opera.version();
	engine.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.webkit = parseFloat(engine.ver);
} else if (/KHTML\/(\S+)/.test(ua)) {
	engine.ver = RegExp["$1"];
	engine.khtml = parseFloat(engine.ver);
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.gecko = parseFloat(engine.ver);
}

Gecko 的版本号位于字符串"rv:“与一个闭括号之间，因此为了提取出这个版本号，正则表达式要查找所有不是闭括号的字符，还要查找字符串”Gecko/"后跟8 个数字。如果上述模式匹配，就提取出版本号并将其保存在相应的属性中

最后一个要检测的呈现引擎就是IE 了。IE 的版本号位于字符串"MSIE"的后面、一个分号的前面，因此相应的正则表达式非常简单，如下所示：

var ua = navigator.userAgent;
if (window.opera){
	engine.ver = window.opera.version();
	engine.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.webkit = parseFloat(engine.ver);
} else if (/KHTML\/(\S+)/.test(ua)) {
	engine.ver = RegExp["$1"];
	engine.khtml = parseFloat(engine.ver);
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.gecko = parseFloat(engine.ver);
} else if (/MSIE ([^;]+)/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.ie = parseFloat(engine.ver);
}

3.2.2 识别浏览器

大多数情况下，识别了浏览器的呈现引擎就足以为我们采取正确的操作提供依据了。可是，只有呈现引擎还不能说明存在所需的JavaScript 功能。苹果公司的Safari 浏览器和谷歌公司的Chrome 浏览器都使用WebKit 作为呈现引擎，但它们的JavaScript 引擎却不一样。有必要像下面这样为client 对象再添加一些新的属性。

var client = function(){
var engine = {
	//呈现引擎
	ie: 0,
	gecko: 0,
	webkit: 0,
	khtml: 0,
	opera: 0,
	//具体的版本
	ver: null
};
var browser = {
	//浏览器
	ie: 0,
	firefox: 0,
	safari: 0,
	konq: 0,
	opera: 0,
	chrome: 0,
	//具体的版本
	ver: null
};
//在此检测呈现引擎、平台和设备
return {
	engine: engine,
	browser: browser
};
}();

3.3 完整的代码

以下是完整的用户代理字符串检测脚本，包括检测呈现引擎、平台、Windows 操作系统、移动设备和游戏系统。

var client = function(){
//呈现引擎
var engine = {
	ie: 0,
	gecko: 0,
	webkit: 0,
	khtml: 0,
	opera: 0,
	//完整的版本号
	ver: null
};
//浏览器
var browser = {
	//主要浏览器
	ie: 0,
	firefox: 0,
	safari: 0,
	konq: 0,
	opera: 0,
	chrome: 0,
	//具体的版本号
	ver: null
};
//平台、设备和操作系统
var system = {
	win: false,
	mac: false,
	x11: false,
	//移动设备
	iphone: false,
	ipod: false,
	ipad: false,
	ios: false,
	android: false,
	nokiaN: false,
	winMobile: false,
	//游戏系统
	wii: false,
	ps: false
};
//检测呈现引擎和浏览器
var ua = navigator.userAgent;
if (window.opera){
	engine.ver = browser.ver = window.opera.version();
	engine.opera = browser.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.webkit = parseFloat(engine.ver);
//确定是Chrome 还是Safari
if (/Chrome\/(\S+)/.test(ua)){
	browser.ver = RegExp["$1"];
	browser.chrome = parseFloat(browser.ver);
} else if (/Version\/(\S+)/.test(ua)){
	browser.ver = RegExp["$1"];
	browser.safari = parseFloat(browser.ver);
} else {
//近似地确定版本号
var safariVersion = 1;
if (engine.webkit < 100){
	safariVersion = 1;
} else if (engine.webkit < 312){
	safariVersion = 1.2;
} else if (engine.webkit < 412){
	safariVersion = 1.3;
} else {
	safariVersion = 2;
}
	browser.safari = browser.ver = safariVersion;
}
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
	engine.ver = browser.ver = RegExp["$1"];
	engine.khtml = browser.konq = parseFloat(engine.ver);
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
	engine.ver = RegExp["$1"];
	engine.gecko = parseFloat(engine.ver);
//确定是不是Firefox
if (/Firefox\/(\S+)/.test(ua)){
	browser.ver = RegExp["$1"];
	browser.firefox = parseFloat(browser.ver);
}
} else if (/MSIE ([^;]+)/.test(ua)){
	engine.ver = browser.ver = RegExp["$1"];
	engine.ie = browser.ie = parseFloat(engine.ver);
}
//检测浏览器
browser.ie = engine.ie;
browser.opera = engine.opera;
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//检测Windows 操作系统
if (system.win){
	if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
		if (RegExp["$1"] == "NT"){
			switch(RegExp["$2"]){
				case "5.0":
				system.win = "2000";
				break;
				case "5.1":
				system.win = "XP";
				break;
				case "6.0":
				system.win = "Vista";
				break;
				case "6.1":
				system.win = "7";
				break;
				default:
				system.win = "NT";
				break;
			}
		} else if (RegExp["$1"] == "9x"){
			system.win = "ME";
		} else {
			system.win = RegExp["$1"];
		}
	}
}
//移动设备
	system.iphone = ua.indexOf("iPhone") > -1;
	system.ipod = ua.indexOf("iPod") > -1;
	system.ipad = ua.indexOf("iPad") > -1;
	system.nokiaN = ua.indexOf("NokiaN") > -1;
//windows mobile
if (system.win == "CE"){
	system.winMobile = system.win;
} else if (system.win == "Ph"){
if(/Windows Phone OS (\d+.\d+)/.test(ua)){;
	system.win = "Phone";
	system.winMobile = parseFloat(RegExp["$1"]);
}
}
//检测iOS 版本
if (system.mac && ua.indexOf("Mobile") > -1){
	if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
		system.ios = parseFloat(RegExp.$1.replace("_", "."));
	} else {
		system.ios = 2; //不能真正检测出来，所以只能猜测
	}
}
//检测Android 版本
if (/Android (\d+\.\d+)/.test(ua)){
	system.android = parseFloat(RegExp.$1);
}
//游戏系统
	system.wii = ua.indexOf("Wii") > -1;
	system.ps = /playstation/i.test(ua);
//返回这些对象
	return {
		engine: engine,
		browser: browser,
		system: system
	};
}();