JavaScript オブジェクトが利用可能かどうかを判断するための最も正しい方法の分析_JavaScript スキル

WBOY
リリース: 2016-05-16 19:00:17
オリジナル
1129 人が閲覧しました

原文: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())

このコードはフォーカスの結果を判定するものであり、ブラウザがフォーカスメソッドをサポートしていることを前提としていますが、サポートしていない場合はこの時点で例外が報告されます。括弧を追加した後、関数が実際に実行されますが、これは私たちが望んでいることではありません。したがって、テスト時にかっこを追加せず、テストに合格した後にこの関数を実行する場合にのみかっこを追加します。たとえば、次の例:

if (window.focus) window.focus()

重要なポイント

上記の議論の要点は、JavaScript で document.images を使用したい場合は、最初に document.images がサポートされているかどうかを判断することです。 window.focus メソッドを使用する場合は、まずブラウザがこのメソッドをサポートしているかどうかを確認します。

オブジェクトを使用する前に常にオブジェクトをチェックしていれば、スクリプトは問題と同様の例外を生成せず、支払うコードは一部のブラウザでブロックされる機能の一部にすぎません。

翻訳者注:

この記事で紹介した状況は、冷戦と同様に、主にブラウザ戦争中に発生し、多くの問題を引き起こしました。しかし、その後の ecma-262 標準の実装により、この状況は多少緩和されました。ただし、ecma-262 の第 3 版では、拡張の結果、当然ながら互換性がなくなることが明確に規定されています。この記事を使用して判断する必要があります。簡単に言うと、現在すべてのオブジェクトを判断する必要はありません。ブラウザが ecma-262 標準のサポートを発表した場合、少なくともどのオブジェクトを判断する必要がないのかがわかります。これは安心と言えます。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート