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

 更新时间:2010年01月15日 16:41:59   作者:  
NCZ在他的同名博客《Feature detection is not browser detection》中,讲述了一直以来前端开发中的一个热门技术——检测用户的浏览器平台,并详细地叙说历史发展以及各种办法的优缺点。
我大致翻译了部分文章,可能有理解错误的地方,敬请指正。值得一提的是,评论部分的争论亦值得一看。

特性检测
起初前端工程师们就极力反对浏览器检测,他们认为类似user-agent嗅探的方法是很不好的,理由是它并不是一种面向未来的代码,无法适应新版的浏览器。更好的做法是使用特性检测,就像这样:
复制代码 代码如下:

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嗅探的话,请先贯彻这一思想:唯一安全的方式是针对特定浏览器的特定版本,超出范围之外都是不可靠的——例如新出的浏览器版本。其实这样做也是个明智的办法,因为相较于向前兼容不确定的新版本而言,向后兼容老版本是最简单的做法。

相关文章

  • JS函数修改html的元素内容,及修改属性内容的方法

    JS函数修改html的元素内容,及修改属性内容的方法

    下面小编就为大家带来一篇JS函数修改html的元素内容,及修改属性内容的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 一文熟练掌握JavaScript的switch用法

    一文熟练掌握JavaScript的switch用法

    在JavaScript中switch语句是一种用于多条件分支的控制语句,下面这篇文章主要给大家介绍了关于如果通过一文熟练掌握JavaScript的switch用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 使用threejs实现滚动效果的示例代码

    使用threejs实现滚动效果的示例代码

    某一天我在刷抖音时,看到一个UI设计师分享了一个好看的网页滚动动效设计,那种飘逸流畅的动画效果立刻抓住了我的眼球,我脑海里立刻开始想象用代码如何实现这个效果,所以本文给大家分享了如何使用threejs实现滚动效果,感兴趣的朋友可以参考下
    2024-01-01
  • JS实现对json对象排序并删除id相同项功能示例

    JS实现对json对象排序并删除id相同项功能示例

    这篇文章主要介绍了JS实现对json对象排序并删除id相同项功能,涉及javascript针对json格式数据的遍历、运算、判断、添加、删除等相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • js实现仿Discuz文本框弹出层效果

    js实现仿Discuz文本框弹出层效果

    这篇文章主要介绍了js实现仿Discuz文本框弹出层效果的方法,可实现点击文本框弹出窗口选择数据的效果,涉及鼠标事件及页面自定义弹出窗口的相关操作技巧,需要的朋友可以参考下
    2015-08-08
  • SVG描边动画

    SVG描边动画

    本文主要介绍了SVG描边动画的相关实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 自定义的一个简单时尚js下拉选择框

    自定义的一个简单时尚js下拉选择框

    下拉选择框,是我们在网页中经常使用到的,在本文为大家详细介绍下使用js使用的下拉选择框
    2013-11-11
  • javascript生成json数据简单示例分享

    javascript生成json数据简单示例分享

    这篇文章主要介绍了javascript生成json数据示例,需要的朋友可以参考下
    2014-02-02
  • JavaScript中函数柯里化示例详解

    JavaScript中函数柯里化示例详解

    JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下
    2023-09-09
  • JavaScript实现的微信二维码图片生成器的示例

    JavaScript实现的微信二维码图片生成器的示例

    二维码分享功能大多是由后端实现的,对服务器的负载较重,这里有一个前端实现的版本,本文介绍了JavaScript实现的微信二维码图片生成器的示例,有需要的可以了解一下。
    2016-10-10

最新评论