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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
javascript里的条件判断
Feb 27 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
js本地图片预览实现代码
Oct 09 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
详解ES6 Symbol 的用途
Oct 14 Javascript
微信小程序实现聊天室功能
Jun 14 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中source #N问题的解决方法
2014/01/27 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
用python写asp详细讲解
2013/12/16 Python
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python松散正则表达式用法分析
2016/04/29 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
电台编导求职信
2014/05/06 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
实用求职信模板范文
2019/05/13 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
使用refresh_token实现无感刷新页面
2022/04/26 Javascript