JS红皮书之客户端检测

1.能力检测

能力检测的目标是识别浏览器的能力，并不能识别特定的浏览器。采用这种方式不必顾忌特定的浏览器如何，只要确定浏览器支持的能力，就可以给出解决方法。能力检测的基本模式如下：

if（某种能力）{
  //使用某种能力
}

举例来说，IE5.0之前的版本不支持document.getElementById()这个DOM方法。于是：

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

这里的getElement()函数的用途是返回具有给定ID的元素。

能力检测有两个重要的概念，第一个概念就是先检测达成目的的最常用的特性。对前面的例子来说就是先检测document.getElementById()，后检测document.all。先检测最常用的特性可以保证代码最优化，因为在多数情况下都可以避免测试多个条件。

第二个重要的概念就是必须测试实际要用到的特性。一个特性存在，不一定以为着另一个特性也存在。

1.1更可靠的能力检测

能力检测对于想知道每个特性是否会按照适当方式行事（而不仅仅是某个特性存在）非常有用。在可能的情况下，要尽量使用typeof进行能力检测。

function() isHostMethod(object,property){
				var t=typrof object[property];
				return t=='function' || (!!(t=='object' && object[property])) || t=='unknown';
			}
resule=isHostMethod(xhr,"open");
resule=isHostMethod(xhr,"foo");

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

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

检测某个或某几个特性并不能确定浏览器。

2.怪癖（BUG）检测

与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷。

3.用户代理检测（User Agent）

第三种，也是争议最大的一种客户端检测技术叫做用户代理检测。用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP过程中，用户代理字符串是作为响应首部发送的，而且该字符窜可以用过JavaScript的navigator.uesrAgent属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端，用户代理检测一般被当作一种万不得已才用的做法，其优先级排在前两种方法之后。

3.1识别呈现引擎

IE（Trident）
用户代理字符串：
IE7
Mozilla/4.0 (compatible; MSIE 7.0;Windows NT 5.1)
TE8+
Mozilla/4.0 (compatible; MSIE 版本号; 操作系统； Trident/Trident 版本号)
Gecko
Mozilla/Mozilla 版本号（平台；加密类型；操作系统或CPU；语言；预先发行版本）
Gecko/Gecko 版本号应用程序或产品/应用程序或产品版本号
WebKit
Mozilla/5.0 （平台；加密类型；操作系统或CPU；语言) AppleWebKit/AppleWebKit 版本号
（KHTML ，like Gecko） Safari/Safari 版本号
Opera
在Opera 8.0之前，其用户代理字符串采用如下格式：
Opera/ 版本号（操作系统或CPU；加密类型）[语言]
Opera 9
Mozilla/4.0 (compatible; MSIE 6.0;Windows NT 5.1; en) Opera 9.50
Opera 10
Opera /9.80 (操作系统或CPU；加密类型语言) Presto/Presto 版本号 Version/版本号
iOS和Android
移动操作系统IOS和Android默认的浏览器都是基于WebKit
iOS
Mozilla/5.0 （平台；加密类型；操作系统或CPU；语言)
AppleWebKit/AppleWebKit 版本号（KHTML ，like Gecko） Version/ 版本号
Mobile/移动版本号 Safari/Safari 版本号
Android与iOS相似

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

var client = function () {
	var engine = {
	         //呈现引擎
	         ie: 0,
	         gecko: 0,
	         webkit: 0,
	         khtml: 0,
	         opera: 0 ,
	         // 具体的版本号
	         ver: null
	};
		return {
                    engine : engine
		};
}();

检测代码：

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

具体检测方法详情请查阅红皮书P231

var ua = navigator.userAgent可以查看浏览器的用户代理字符串

3.2使用方法

用户检测是客户端检测的最后一个选择。只要可能，都应该优先采用能力检测和怪癖检测。

JS红皮书之客户端检测

猜你喜欢