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


Posted in Javascript onJanuary 15, 2010

我大致翻译了部分文章,可能有理解错误的地方,敬请指正。值得一提的是,评论部分的争论亦值得一看。

特性检测
起初前端工程师们就极力反对浏览器检测,他们认为类似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嗅探的话,请先贯彻这一思想:唯一安全的方式是针对特定浏览器的特定版本,超出范围之外都是不可靠的——例如新出的浏览器版本。其实这样做也是个明智的办法,因为相较于向前兼容不确定的新版本而言,向后兼容老版本是最简单的做法。
Javascript 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 #Javascript
extjs 为某个事件设置拦截器
Jan 15 #Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 #Javascript
javascript 不间断的图片滚动并可点击
Jan 15 #Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 #Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 #Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
python读出当前时间精度到秒的代码
2019/07/05 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Django使用rest_framework写出API
2020/05/21 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
HR求职自荐信范文
2014/06/21 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
初三语文教学计划
2015/01/22 职场文书
主婚人致辞精选
2015/07/28 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python