说说 JavaScript 对浏览器的能力检测

能力检测，又可以称为特性检测，它的目标是识别浏览器的能力，它的基本模式如下：

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

在 IE5.0 之前的版本不支持 document.getElementsById() 方法，但可以使用非标准的 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!");    }}

能力检测有两个关键点：

• 先检测能达到目的的最常用的特性，这可以保证代码的最优化，因为在多数情况下都可以避免测试多个条件。
• 必须实际测试要用到的特性，因为一个特性的存在，并不意味着另一个特性也存在。

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

上面的一个错误使用能力检测的例子。因为支持 document.all 的浏览器除了 IE 还有可能是 Opera.

1 更可靠的能力检测

//错误function isSortable(object){    return !!object.sort;//任何包含 sort 属性的对象也会返回 true}

因此，更好的方式是检测 sort 是否是一个函数：

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

在尽可能的情况下，尽量使用 typeof 进行能力检测。

//除了 IE8 以及之前的版本，其他浏览器都会返回 truefunction hasCreateElement(){    return typeof document.createElement == "function";}

IE8 以及之前的版本中，会返回 object。因为 IE8 以及之前的版本中的宿主对象是通过 COM 实现的，IE9 纠正了过来（返回 function）。

IE 还有一点不规范：

 var xhr = new ActiveXObject("Microsoft.XMLHttp"); typof xhr.open;//返回 unknown

因此要在跨浏览器的情况下测试任何对象的属性是否存在，请使用下面这个函数：

 function isHostMethod (object, property){     var t = typeof object(property);     return t=='function' || (!!(t=='object' && object[property])) || t== "unknown"; }

这个函数可以这样使用：

isHostMethod(xhr,"open");//trueisHostMethod(xhr,"foo");//false

注意，这个函数考虑到了浏览器的怪异行为，但它可能在未来会失效，所以在使用时，必须对它可能存在的风险进行理性的估计。

2 能力检测

检测某几个特性并不能真正确定浏览器，比如这些例子：

 //Safari 也实现了 vendor 和 vendorSub 的特性。 var isFirefox = !!(navigator.vendor && navigator.vendorSub); //假设 IE 在未来的版本中还会继续支持这些特性，这样的假设风险很大。 var isIE = !!(document.all && document.uniqueID);

注意，这里的代码使用了我们之前说过的双逻辑非操作符，因为它可以模拟 Boolean() 方法，把值转换为布尔值，是不是很方便哪 O(∩_∩)O~

要检测某个特定的浏览器特性，最好是一次性检测所有的相关特性：

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

---

注意： 在实际开发的过程中，应该是将“能力检测”作为确定下一步解决方案的依据。