判断JavaScript对象是否可用的最正确方法分析


Posted in Javascript onOctober 03, 2008

原文:http://www.quirksmode.org/js/support.html
原文作者:Peter-Paul Koch

以下为对原文的翻译:

判断对象存在的方法

很快你就会注意到,JavaScript的部分功能在部分浏览器中无效。如果你要使用一些脚本的高级特性,你首先要检查浏览器是否支持要使用的对象,本文具体说明判断的正确方法。

通过判断浏览器的版本:不!

如果你想知道浏览器是否支持代码中使用的那些对象,记住,永远都不要通过浏览器的版本来判断。我确定你知道,有些浏览器支持你的代码,而有些浏览器不支持你的代码,可是你考虑过其他的浏览器么?那些不知名的小浏览器?

就算你可以检测出90%的用户所使用的浏览器及版本,还是有一些不出名的浏览器不能正确运行你的代码,结果要么是一大堆异常信息,要么是某些脚本没有被正确的执行。不管是哪种情况,你都是在使用漏洞百出的代码欺骗最终浏览网站的用户。

个案研究:mouseovers

一个古老的个案可以证实上述的说法。虽然这种情况现在已经不存在,但是同样原理的例子还是存在的。

一个公认的事实就是IE 3不支持document.images这个数组,但这个数组对mouseover脚本又是极为重要。所以我们就应该禁止mouseover脚本在IE 3浏览器中执行。解决方案之一就是对浏览器进行判断,当判断出用户使用的浏览器是IE 3的时候,就不执行这个函数。

但是,在大多数操作系统中,Netscape 2浏览器同样不支持document.images数组。如果你仅仅判断浏览器是不是IE 3,那么使用Netscape 2的用户就会看到一大堆异常信息。

那为什么不连同Netscape 2一起检测呢?因为就算这样做也是无事于补。

运行在OS/2上的Netscape 2是和Netscape 3完全兼容的,而且可以很好的处理mouseover效果。尽管如此,大家为什么还会经常看不到这个效果呢?因为web开发者使用了浏览器检测的手段,在 mouseover脚本中屏蔽了Netscape 2浏览器。因此开发者们,在没有充足理由的情况下,剥夺了用户拥有良好互动体验的权利。合适的对象检测方法可以避免这种情况的发生。

最后,越来越多的浏览器允许用户把浏览器的认证字符串修改为自己喜欢的内容,这样就存在很大的可能性,检测不出用户真实使用的浏览器以及版本,自然就不能保证无故障的运行代码了。由此,web开发者再次剥夺了用户额外互动效果的权利。更糟的是,这样的代码通常写的很烂。

既然浏览器的版本不可靠,那么是否JavaScript的版本更加可信一些呢?

通过判断JavaScript的版本:不!

在最初规划的时候,Netscape完全意识到未来的浏览器会支持比现在多得多的对象,而web开发者必须能够把新老浏览器区分开来。

起初的计划是让开发者对浏览器的版本进行判断。比如某某浏览器只能支持JavaScript 1.x等。在script标签中增加version属性,这样如果浏览器不支持相应版本的JavaScript,自然就不会执行这段脚本。

但是,当Microsoft涉足浏览器市场后,这个想法就无法进行下去了。尽管早在Netscape 4和IE 4的时候就都支持JavaScript 1.2,可是就算再有想象力的人也不会相信他们支持的是相同的JavaScript 1.2。因为这个版本号已经过时了,而且肯定和对象检测不相干。

所以不要使用JavaScript的版本号来做什么,他们没什么实际的作用。

正确的方法:对象判断

相反,我们只需通过简单的方法来判断浏览器是否支持要使用的对象(或者是方法、数组或者属性)。我们还是使用mouseover这个例子。这段脚本依赖于document.images这个数组,所以最重要的事情当然是判断浏览器是否支持他,下面是具体的做法:

if (document.images)
{
do something with the images array
}

现在你有了一个完全的保障,运行这段代码的浏览器肯定支持这段脚本。条件语句判断document.image这个数组是否存在,如果返回true,那么这段脚本将会被执行,反之如果这个数组不存在,将会返回false,而且这段脚本肯定不会被执行。

还有一个常用的检测是针对window.focus的。这是一个方法(一条你告诉JavaScript要去做什么的命令)。如果我们要使用这个方法,我们必须首先检测浏览器是否支持这个方法。

检测函数是否存在的正确方法如下,牢记千万不要在函数后面加括号:

if (window.focus)

上面这段代码的含义是:“浏览器是否支持window.focus这个函数”,而下面这段代码的含义不同:

if (window.focus())

这段代码是对focus的结果进行判断,而且已经假设浏览器是支持focus方法的,而如果不支持,这时候就会报异常了。加了括号以后实际上执行了函数,而这并不是我们想要的状况。所以检测的时候不要加括号,而只有在检测通过后才加上括号执行这个函数。比如下面这个例子:

if (window.focus) window.focus()

重点

以上讨论的所有重点就是:在JavaScript中,如果你要使用document.images,首先判断是否支持document.images。如果你要使用window.focus方法,首先判断是否浏览器是否支持这个方法。

如果你总是在使用对象前进行检测,你的脚本将不会产生类似问题的异常,付出的代码只是有些功能在部分浏览器中被屏蔽掉了而已。

译者注:

任何战争都是会带来很多副作用的,本文所介绍的情况主要是发生在浏览器大战的时候的,就像冷战一样,造成了很多遗留的问题。但是后来ecma- 262标准的实施,让这种情况得到些许缓和,可是在ecma-262第三版中明确规定,允许各家自己对其进行扩展,扩展的结果自然就是不兼容,自然要使用 本文的方法进行判断。索性,我们现在只是不用判断所有的对象,如果一个浏览器宣布支持ecma-262标准,至少我们知道哪些对象不用判断,也算是一种慰 藉吧。

Javascript 相关文章推荐
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
IE与firefox之jquery用法区别
Oct 03 #Javascript
jquery的颜色选择插件实例代码
Oct 02 #Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 #Javascript
JavaScript下申明对象的几种方法小结
Oct 02 #Javascript
初学JavaScript第二章
Sep 30 #Javascript
select组合框option的捕捉实例代码
Sep 30 #Javascript
javascript优先加载笔记代码
Sep 30 #Javascript
You might like
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
PHP实现计算器小功能
2020/08/28 PHP
JS获取URL中的参数数据
2013/12/05 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
食品安全检查制度
2014/02/03 职场文书
校长创先争优承诺书
2014/08/30 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2014年物流工作总结
2014/11/25 职场文书
测量员岗位职责
2015/02/14 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
城南旧事读书笔记
2015/06/29 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL