使用javascript檢測用戶瀏覽器

Question

我正在使用以下代碼來發現用戶瀏覽器：

navigator.appName == "Microsoft Internet Explorer"

它始終有效，但是IE11返回Netscape

我讀過，瀏覽器檢測是一種不好的做法。 （ 為什么JavaScript navigator.appName為Safari，Firefox和Chrome返回Netscape？ ），我們應該檢測到該功能。 但是MS 網站正在教我如何檢測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的正確方法是什么？

Answer 1

正確的方法將是僅檢查功能，如前所述，根本不要進行瀏覽器嗅探。

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

要做到這一點，您可以使用execCommand來polyfill window.stop，就像這樣

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

這也將確保它是本機方法，並且已在Chrome，Firefox和Opera中進行了測試

Answer 2

好吧，如果有一個JavaScript庫可以檢測用戶瀏覽器中的HTML5和CSS3功能 ，那么就可以了，這樣您就可以知道是否支持某個功能，而不是依賴瀏覽器檢測（前面的版本噩夢）...

有... modernizr

從文檔中 ：

---

為什么要使用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'
});

在此示例中，我們決定根據主機瀏覽器是否支持地理位置來加載其他腳本。 這樣，您可以避免用戶下載其瀏覽器不需要的代碼。 這樣可以提高頁面性能，並為在您的polyfill中建立一個健康的抽象空間提供了明確的位置（“ geo.js”和“ geo-polyfill.js”在應用程序的其余部分看起來都是相同的，即使它們“重新實施）。

IMO modernizr是事實上的功能檢測JavaScript庫，我在所有項目中都使用它。 它確實有一點學習曲線，但是文檔很棒，並且涵蓋了幾乎所有功能，並且僅在上面的示例中為您提供的靈活性就足以使用它了。