Question

可能重复：
Browser detection versus feature detection

我一直在阅读有关功能检测的内容（使用Google /维基百科/文档），但并没有完全掌握它。弹出一些问题

为什么需要功能检测。我们不能只检测浏览器并为其编写代码吗？
进行特征检测的不同方法。最好的呢？
你能给我一个实用的真实世界的例子吗？我们如何处理旧浏览器以及如何在其中复制相同的功能＆gt;

Answer 1

为什么需要功能检测。我们不能只检测浏览器并为其编写代码吗？

不，很快，您的每个浏览器的列表都会过时，而且它本质上是不完整的。（三年前的黑莓浏览器是否支持输入中的占位符文本？我不知道，也不需要关心。）例如，以前IE没有addEventListener。现在确实如此。如果您开始一直检测到浏览器版本级别，那么当新版本出现时您会怎么做？这是一场维护噩梦。

进行特征检测的不同方法。最好的呢？

没有单一的特征检测，它取决于功能。您可以找到很棒的功能检测列表on this page。还有像Modernizr这样的库可以为您进行特征检测。

你能给我一个真实世界的例子，其中功能检测工作。我们如何处理旧浏览器以及如何在其中复制相同的功能＆gt;

不确定。我上面给了你两个，让我们稍微深入一点（按相反的顺序）。

addEventListener：这在代码中很常见，不使用jQuery，YUI等库：

if (elm.addEventListener) {
    // Standard
    elm.addEventListener("click", myClickHandler, false);
}
else if (elm.attachEvent) {
    // IE fallback
    elm.attachEvent("onclick", myClickHandler);
}

上面代码的优点是当IE9出现并且addEventListener时（在标准模式下），代码才有用。无需更新数据库就能说“IE9现在就有了。”

或者输入字段中有占位符文本，例如：

<input type="text" name="firstName" placeholder="First name">

当浏览器不支持占位符文本时，它们在元素上没有placeholder属性;当他们这样做时，他们会。因此，此功能可检测浏览器是否支持占位符：

if ('placeholder' in document.createElement('input')) {
    // Supports the placeholders
}
else {
    // Doesn't, need to do something
}

如果没有，您可以将代码连接起来自行完成。我在我的place5插件中执行此操作，该插件是此功能的填充。

Answer 2

因为浏览器可能伪造自己的身份。另外，因为您无法了解所有可能的浏览器的功能。
取决于功能。如果它是JavaScript方法，您通常只需检查它：if (window.XMLHttpRequest) { alert('it supports the XML HTTP requests!'); }。不同的功能可能需要不同的方法来检查它们。
使用与之前相同的示例 - 如果检查返回false，您将回退创建ActiveX对象（如果支持 - 它在较旧的IE版本上）。或者，您可以向用户显示一条消息，说明他们无法在您的应用程序中执行某些操作。

Answer 3

一些答案，但照常开放讨论：）

1）要回答这个问题，只需考虑一下你有多少不同的浏览器及其版本...如果你想支持尽可能多的浏览器，你需要为每一个编写不同的代码片段。并且通过移动浏览，数字加起来。能够“检测”某个功能将允许您只编写2个代码，一个用于启用该功能的浏览器，另一个用于其他代码。

2）这当然是主观的。我使用Modernizr

3）看看Modernizr可以检测到的功能，你会看到。例如，如果要启用地理位置客户端，最好的方法是使用功能检测库，而不是保留自己的浏览器特定代码数据库（这与问题1相关）。通常，要覆盖未实现的功能，您可以在if-then-else中编写自己的代码或使用所谓的poly-fill，您可以阅读它here。基本上它们是实现旧浏览器中不存在的功能的代码片段。它的美妙之处在于它们是完全透明的，您只需使用它们并且不关心它们是否使用真正的实现或重新使用变通方法。 sessionStorage的示例值得一读。

支持没有新功能的浏览器

3 个答案: