javascript 特性检测并非浏览器检测

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript 特性检测并非浏览器检测，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4319字，纯文字阅读大概需要7分钟。

内容图文

if (navigator.userAgent.indexOf("MSIE 7") > -1){ 
//do something 
} 
 
而更好的做法是这样： 
 代码如下:

if(document.all){ 
//do something 
} 
 
这两种方式并不相同。前者是检测浏览器的特殊名称和版本；后者却是检测浏览器的特性。UA嗅探能够精确得到浏览器的类型和版本（至少能得知浏览器类型），而特性检测却是去确定浏览器是否拥有某个对象或者支持某个方法。注意这两者是完全不同的。 
因为特性检测依赖于哪些浏览器支持，当出现新版本浏览器的时候需要繁琐的确认工作。例如DOM标准刚出现的时候，并不是所有浏览器都支持getElementById()方法，所以一开始代码可能是这样： 
 代码如下:

if(document.getElementById){ //DOM 
element = document.getElementById(id); 
} else if (document.all) { //IE 
element = document.all[id]; 
} else if (document.layers){ //Netscape < 6 
element = document.layers[id]; 
} 
 
这是特性检测很好的一个例子，亮点在于当其它浏览器开始支持getElementById()方法时不必修改代码。 
混合方式 
后来前端工程师们考虑改进的写法，代码变化成这样： 
 代码如下:

//AVOID!!! 
if (document.all) { //IE 
id = document.uniqueID; 
} else { 
id = Math.random(); 
} 
 
这个代码的问题是通过检测document.all属性来确定是否是IE。当确定是IE后，假定使用私有的document.uniqueID属性也是安全的。然而，目前所作的只是确定是否支持document.all，并非是去辨识浏览器是否为IE。仅仅支持document.all的话也不意味着document.uniqueID是可用的。 
后来人们开始这样写，用下面那行代替上面的： 
var isIE = navigator.userAgent.indexOf("MSIE") > -1; 
//下面这行代替上面那行 
var isIE = !!document.all;这些变化说明大家对“不要使用UA嗅探”存在误解——不再对浏览器的详细信息进行检测，取而代之的是通过特性的支持来推断。这种基于浏览器特性检测的方式非常不好。 
后来前端们发现document.all并不可靠，更好的检测IE变为： 
var isIE = !!document.all && document.uniqueID;这种实现方式陷入歧途。不仅需要费时费事地去识别浏览器所增加的特性支持，另外也不能确定其它浏览器开始支持相同的特性。 
如果你认为这样的代码并未被广泛使用，那么看看来自于老版本的Mootools代码片段吧： 
 代码如下:

//from MooTools 1.1.2 
if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true; 
else if (document.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true; 
else if (document.getBoxObjectFor != null || window.mozInnerScreenX != null) window.gecko = true; 
 
注意它是如何使用特性检测的。我可以指出它一系列的问题，比如通过检测window.ie会将ie8误认为ie7。 
余波 
随着浏览器的快速发展，使用特性检测变得越来越困难和不可靠。但是Mootools 1.2.4仍然使用这一方法，例如：getBoxObjectFor()。 
 代码如下:

//from MooTools 1.2.4 
var Browser = $merge({ 
    Engine: {name: 'unknown', version: 0}, 
    Platform: {name: (window.orientation != undefined) ? 'ipod' : (navigator.platform.match(/mac|win|linux/i) || ['other'])[0].toLowerCase()}, 
    Features: {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)}, 
    Plugins: {}, 
    Engines: { 
        presto: function(){ 
            return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925)); 
        }, 
        trident: function(){ 
            return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4); 
        }, 
        webkit: function(){ 
            return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419); 
        }, 
        gecko: function(){ 
            return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18); 
        } 
    } 
}, Browser || {}); 
 
应该怎么做？ 
特性检测是个应该避免的方法，尽管直接进行特性检测是个很好的方法，并且大部分情况下能满足需求。一般只要在检测前知道这个特性是否被实现即可，而不会去考虑它们之间的关系。 
我并非是说永远不使用浏览器特性检测而是基于UA嗅探，因为我相信它还是有很多用途的，然而我不相信它有很多合理的用途。如果你考虑UA嗅探的话，请先贯彻这一思想：唯一安全的方式是针对特定浏览器的特定版本，超出范围之外都是不可靠的——例如新出的浏览器版本。其实这样做也是个明智的办法，因为相较于向前兼容不确定的新版本而言，向后兼容老版本是最简单的做法。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的javascript 特性检测并非浏览器检测全部内容，希望文章能够帮你解决javascript 特性检测并非浏览器检测所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端