3

可能重复：
浏览器检测与特征检测

我一直在阅读有关特征检测的内容（使用 Google/Wikipedia/Docs），但不太了解它。弹出一些问题

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

3 回答 3

4

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

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

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

没有单一的特征检测，它取决于特征。您可以在此页面上找到大量功能检测列表。还有像Modernizr这样的库可以为您进行特征检测。

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

当然。我在上面给了你两个，让我们深入研究一下（以相反的顺序）。

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 插件中执行此操作，该插件是此功能的 polyfill。

于 2012-11-06T16:28:07.920 回答
0

一些答案，但像往常一样开放讨论:)

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

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

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

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