> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 객체의 사용 가능 여부를 판단하는 가장 정확한 방법 분석_javascript 기술

JavaScript 객체의 사용 가능 여부를 판단하는 가장 정확한 방법 분석_javascript 기술

WBOY
풀어 주다: 2016-05-16 19:00:17
원래의
1154명이 탐색했습니다.

原文: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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿