第九章：客户端检测（能力检测、怪癖检测）

客户端检测

• 因为浏览器之间存在差异，哪怕是跨平台的同种浏览器，也有一些差异，这些给开发带来了困难。因此客户端检测是一种补救措施，这种措施不到万不得已不要轻易使用，尽量使用更通用的方法。

能力检测

• 能力检测的目的不是检测浏览器类型，而是检测浏览器是否有该功能。举例来说IE5.0之前的版本不支持document.getElementById()这个DOM方法，但是可以用document.all属性去实现这个功能：

    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.必须测试实际用到的特性。不能以为有document.all就认为它是IE而去使用IE拥有的特征。

    function getWindowWidth() {        if (document.all) { //假设是IE            return document.documentElement.clientWidth;//错误的用法        } else {            return window.innerWidth;        }    }

更可靠的能力检测

• 直接上例子。有这么一个函数

    function isSortable(object) {        return !!object.sort;//双感叹号相当于Boolean()    }

• 我们是否能用这个函数来检测一个对象是否支持排序？答案是否定的。当对象中存在一个sort的属性时，该函数也会返回true。所以我们最好写成：

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

• 使用typeof操作符的确能让检测更加可靠，但是也有例外。在IE8及以前的版本中DOM对象的方法的类型是object而不是function。这是因为DOM对象是宿主对象，IE的早期版本中宿主对象是通过COM而非JScript实现的。因此像document.createElement()函数在IE早期的确是一个COM对象而非function。

    //IE8及以前不行    function hasCreateElement() {        return typeof document.createElement == "function";    }

• 另外仅IE支持的ActiveX对象与其他对象的差异也很大。例如，不适用typeof检测某个属性会导致错误：

    var xhr = new ActiveXObject("Microsoft.XMLHttp");    if (xhr.open) { //书上说这里会出错，但IE9 xhr.open为undefined        //执行操作    }

    function isHostMethod(object, property) {        var t = typeof object[property];        return t == "function" || t == "unknown" //IE对typeof xhr.open 会返回"unknown"            || !!(t == "object" && object[property]);//是COM对象 且不为null    }

• 可惜我在IE9里面测试alert(isHostMethod(xxx, open));依然是false，这里不知道为什么。

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

• 在实际开发中，应该将能力检测作为确定下一步解决方案的依据，而不是用它来判断用户使用的是什么浏览器。下面是两个典型误用和两个正确用法：

    //错误！还不够具体。且后期Safari也实现了相同的属性。    var isFirefox = !!(navigator.vendor && navigator.vendorSub);    //错误！假设过头了。假设了IE将来版本也会实现这两个属性，且其他浏览器不会实现。    var isIE = !!(document.all && document.uniqueID);    //确认浏览器是否支持Netscape风格插件    var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);    //确定浏览器是否具有DOM1级规定的能力    var hasDOM1 = !!(document.getElementById && document.createElement &&                    document.getElementsByTagName);

怪癖检测

• 怪癖检测是想要知道浏览器存在什么缺陷（即bug）。通常要尝试运行一段代码，以确定某一特性不能正常工作。例如在IE8及其早期版本中，如果某个实例属性和原来标记为不可枚举的属性同名，那么该属性就不会出现在for-in循环中。还有Safari3以前版本中会枚举被隐藏的属性。可以通过下面的例子来检测怪癖：

    var hasDontEnumQuirk = function(){        var o = { toString : function(){} };        for (var prop in o){            if (prop == "toString"){                return false;            }        }        return true;    }();//匿名函数直接执行    var hasEnumShadowsQuirk = function(){        var o = { toString : function(){} };        var count = 0;        for (var prop in o){            if (prop == "toString"){                count++;            }        }        return (count > 1);    }();//匿名函数直接执行    alert(hasDontEnumQuirk);    alert(hasEnumShadowsQuirk);