使用 javascript 检测用户浏览器答案

【问题标题】：Detect the user browser with javascript使用 javascript 检测用户浏览器
【发布时间】：2014-10-12 01:48:50
【问题描述】：

我正在使用以下代码来发现用户浏览器：

navigator.appName == "Microsoft Internet Explorer"

它总是有效，但 IE11 正在返回 Netscape

我读到浏览器检测是一种不好的做法。 (Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?)，我们应该检测特征。但是MS的site正在教我如何检测IE浏览器。

在 IE11 中，甚至 userAgent 都会提到 IE：

Mozilla/5.0（Windows NT 6.3；WOW64；Trident/7.0；.NET4.0E；.NET4.0C； InfoPath.3； .NET CLR 3.5.30729； .NET CLR 2.0.50727； .NET CLR 3.0.30729； rv:11.0) 喜欢壁虎

这就是说：

了解我必须使用什么的正确方法是什么？

比如我用的是IE，命令是：

window.document.execCommand('Stop');

否则，命令是

window.stop()

搭便车，知道浏览器是否支持HTML5的正确方法是什么？

【问题讨论】：

关于您的最后一个问题，请参考here。
他们怎么知道我的浏览器？
您真的应该阅读有关使用特征检测而不是浏览器检测的信息。浏览器检测很脆弱，每次发布新浏览器时都会中断。特征检测不正确是向前和向后兼容的。
modernizr.com真的没那么受欢迎吗？
window.stop ? window.stop() : document.execCommand('Stop');

标签： javascript html cross-browser

【解决方案1】：

正如您所提到的，正确的方法是只检查该功能，而根本不进行浏览器嗅探。

function stop() {
    if ('execCommand' in document) {
       document.execCommand('Stop');
    }else{
       window.stop()
    }
}

反之，你可以用 execCommand 填充 window.stop，像这样

if (! ( typeof window.stop == 'function' && 
        window.stop.toString().indexOf('native code') != -1
      )
) {
    window.stop = function () {
        document.execCommand('Stop');
    }
}

这也可以确保它是本机方法，并在 Chrome、Firefox 和 Opera 中进行了测试

【讨论】：

您是否不希望像if ('stop' in window) 那样反过来检测，所以如果存在window.stop()，您更喜欢使用它吗？
@jfriend00 - 我担心有人会这样做<div id="stop"></div>，突然window.stop 不是你想象的那样
非常感谢。我知道我需要寻找该功能，但我不知道该怎么做。
@Nizam - 你可以用if (typeof window.stop === "function")检查某事是否是一个函数。
我明白你关于与stop 的全球冲突的观点。我担心的是支持execCommand，但不支持"stop" 动词。当我阅读MDN page 时，我看到很多execCommand 动词，但没有"stop" 这可能会给你的逻辑带来问题。

【解决方案2】：

如果有一个 JavaScript 库可以检测用户浏览器中的 HTML5 和 CSS3 功能，那不是很酷，这样您就可以知道是否支持某个功能，而不是依赖于浏览器检测（版本噩梦）...

有...modernizr

来自Docs：

为什么要使用 Modernizr？ 利用很酷的新 Web 技术非常有趣，除非您必须支持落后的浏览器。 Modernizr 使您可以轻松编写条件 JavaScript 和 CSS 来处理每种情况，无论浏览器是否支持某个功能。它非常适合轻松进行渐进增强。

工作原理 Modernizr 在页面加载时快速运行以检测功能；然后它会创建一个带有结果的 JavaScript 对象，并将类添加到 html 元素中，以便您键入 CSS。 Modernizr 支持数十种测试，并且可以选择包含 YepNope.js 用于有条件地加载外部 .js 和 .css 资源。

一个示例（也来自文档）

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

在本例中，我们决定根据主机浏览器是否支持地理位置来加载不同的脚本。通过这样做，您可以让用户不必下载他们的浏览器不需要的代码。这提高了页面性能，并提供了一个清晰的位置来为您的 polyfills 构建健康的抽象（'geo.js' 和 'geo-polyfill.js' 对于应用程序的其余部分来说似乎都是一样的，即使它们'重新实现不同）。

IMO modernizr 是事实上的特征检测 JavaScript 库，我在所有项目中都使用它。它确实有一点学习曲线，但文档很棒，几乎涵盖了所有功能，仅在上述示例中它为您提供的灵活性就足以成为使用它的理由。

【讨论】：