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

客户端检测

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

能力检测

• 能力检测的目的不是检测浏览器类型，而是检测浏览器是否有该功能。举例来说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);