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

原文: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标准,至少我们知道哪些对象不用判断,也算是一种慰 藉吧。

时间: 2024-07-29 01:28:19

判断JavaScript对象是否可用的最正确方法分析_javascript技巧的相关文章

判断JS对象是否拥有某属性的方法推荐_javascript技巧

两种方式,但稍有区别 1,in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 可看到无论是name,还是原形链上的toString,都能检测到返回true. 2,hasOwnProperty 方法 var obj = {name:'jack'}; obj.hasOwnProperty('name'); // --> true obj.

javascript显示隐藏层比较不错的方法分析_javascript技巧

这是一个Q&A的页面,设计师希望能够点击相关的问题后,在它下方显示对应的答案.这是一个比较常见功能,通常的解决办法是把"答案"当作整个问题容器的子元素,然后点击父元素上的按钮后展开对应的子元素.通过父子元素的对应关系来匹配标题和答案. 但是当初写html的时候并没有考虑到脚本编写(需求是后加的),所以,答案和标题没有父子关系可以对应. html代码如下. 所以,这里需要用到另一种方法来匹配答案和标题.我们可以通过捕捉元素的位置来匹配它们.也就是说第一条标题,对应的肯定是整个序列

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

原文:http://www.quirksmode.org/js/support.html 原文作者:Peter-Paul Koch 以下为对原文的翻译: 判断对象存在的方法 很快你就会注意到,JavaScript的部分功能在部分浏览器中无效.如果你要使用一些脚本的高级特性,你首先要检查浏览器是否支持要使用的对象,本文具体说明判断的正确方法. 通过判断浏览器的版本:不! 如果你想知道浏览器是否 支持代码中使用的那些对象,记住,永远都不要通过浏览器的版本来判断.我确定你知道,有些浏览器支持你的代码,

JavaScript判断图片是否已经加载完毕的方法汇总_javascript技巧

在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JavaScript中遍历对象的property的3种方法介绍_javascript技巧

在JavaScript中,可以用三种方法来遍历对象的property: 1.for/in.可以使用for/in语句遍历对象自身的property(Own Property)及其从原型对象处继承的property,只有enumerable的property才会被遍历到. 2.Object.keys().可以将对象作为参数传入Object.keys(),Object.keys()语句将返回由所有property名称字符串所组成的数组.Object.keys()语句仅返回对象自身的(Own Prope

能说明你的Javascript技术很烂的五个原因分析_javascript技巧

它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型.其实,你和Javascript都站错了立场,而现在,你让Javascript很生气.这里有五个原因能说明你的Javascript技术很烂. 1. 你没有使用命名空间. 是否还记得在大学里老师告诉你不要在家庭作业里使用全局变量?Javascript里的全局变量的使用方法也不例外.Web网页稍不留神就会变的混乱不堪.到处都是从互联网上各个角落里找来的乱糟糟的相互侵犯的脚本和脚本库.如

JS判断输入的字符串是否是数字的方法(正则表达式)_javascript技巧

实例如下: if (!checkNumber(gopage_val)) { alert("请输入正确页数(数字)"); return false; } //验证字符串是否是数字 function checkNumber(theObj) { var reg = /^[0-9]+.?[0-9]*$/; if (reg.test(theObj)) { return true; } return false; } 以上这篇JS判断输入的字符串是否是数字的方法(正则表达式)就是小编分享给大家的全

利用JS判断字符串是否含有数字与特殊字符的方法小结_javascript技巧

前言 本文主要介绍的是利用JS判断字符串是否含有数字与特殊字符的方法,文中有几种不同的方法,包括普通的JS验证法.正则表达式法,另外还有判断是否为浮点数的js函数,在最后还将简要介绍下isNAN函数的使用方法和例子,来一起学习学习吧. 一.正则表达式方法判断是否为数字,包括判断正整数: function checkRate(input) { var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字,//若判断正整数,则后边是:/^[1-9]+[0-9]*]*$/ if

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析_javascript技巧

1. children与childNodes IE提供的children.childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会.比如: <div id="dd"> <div>yizhu2000</div> </div> d为dd的div在IE下用childNodes查看,其子节点数为1,而