判断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 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
koa源码中promise的解读
Nov 13 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
js实现烟花特效
Mar 02 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
第四章 php数学运算
2011/12/30 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vue-cli常用设置总结
2018/02/24 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
详解React 条件渲染
2020/07/08 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python with用法实例
2015/04/14 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
蔬菜基地的创业计划书
2014/01/06 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
外贸专业求职信
2014/03/09 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
七匹狼男装广告词
2014/03/21 职场文书
个人租房协议书样本
2014/10/01 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL