JavaScript 高级程序设计(第9章 客户端检测）

第9章 客户端检测

1. 能力检测

能力检测的基本模式:

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

(1) 更可靠的能力检测

function isSortable(object){
        return typeof object.sort == "function";
}

(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);

2. 怪癖检测

怪癖检测(quirks detection)的目标是识别浏览器的特殊行为。

IE8 及更早版本中存在一个 bug,即如果 某个实例属性与[[Enumerable]]标记为 false 的某个原型属性同名,那么该实例属性将不会出现在 fon-in 循环当中。

3. 用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。
(1) 用户代理字符串的历史
(2) 用户代理字符串检测技术
＊ 识别呈现引擎
主要检测五大呈现引擎: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
    };
 }();

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

检测顺序:

1. 第一步就是识别Opera,因为它的用户代理字符串有可能完全模仿其他浏览器。
2. 第二位检测的呈现引擎是 WebKit。因为 WebKit 的用户代理字符串中包含"Gecko"和 "KHTML"这两个子字符串,所以如果首先检测它们,很可能会得出错误的结论。不过,WebKit 的用户代理字符串中的"AppleWebKit"是独一无二的,因此检测这个字符串最合适。
3. KHTML 的用户代理字符串中也包含"Gecko",因此 在排除 KHTML 之前,我们无法准确检测基于 Gecko 的浏览器。
4. 在用户代理字符串中，Gecko的版本号不会出现在字符串“Gecko”的后面，而是会出现在字符串“rv”的后面。
   5.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);
}

＊识别浏览器
＊ 识别平台
＊ 识别 Windows 操作系统
＊ 识别移动设备
＊识别游戏系统