關(guān)鍵要點

• JavaScript 的特性檢測（測試程序員想要使用的特性）並不總是可靠的。例如，在 Internet Explorer 中測試 ActiveXObject 以進(jìn)行 Ajax 請求、映射到 DOM 屬性的 HTML 屬性以及對用戶行為的假設(shè)（例如檢測觸摸設(shè)備）等。
• 當(dāng)特性檢測失敗時，有時需要採用瀏覽器檢測。但是，建議使用專有對象測試而不是 navigator 信息，並將其用於排除瀏覽器而不是包含瀏覽器。
• 在實現(xiàn)瀏覽器檢測時，務(wù)必極其小心。始終首先假設(shè)完全符合特性測試，只有在知道某個特性無法按預(yù)期工作時才求助於瀏覽器檢測。此外，用於對象和特性測試的語法會影響檢測的成功率，因此選擇正確的語法至關(guān)重要。

曾經(jīng)，瀏覽器檢測是 JavaScript 程序員的看家本領(lǐng)。如果我們知道某些功能在 IE5 中有效但在 Netscape 4 中無效，我們會測試該瀏覽器並相應(yīng)地修改代碼。例如：

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我們認(rèn)為此瀏覽器是 IE5
}

但是，當(dāng)我第一次加入這個行業(yè)時，軍備競賽就已經(jīng)開始了！供應(yīng)商正在向用戶代理字符串添加額外的值，因此它們看起來像是其競爭對手的瀏覽器，也是它們自己的瀏覽器。例如，這是 Mac 版 Safari 5：

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

這將匹配對“Safari”、“Webkit”以及“KHTML”（Webkit 基於的Konqueror 代碼庫）的測試；但它也匹配“Gecko”（這是Firefox 的渲染引擎），當(dāng)然還有“Mozilla ”（由於歷史原因，幾乎每個瀏覽器都聲稱自己是Mozilla）。

添加所有這些值的目的是規(guī)避瀏覽器檢測。如果腳本假設(shè)只有 Firefox 才能處理特定功能，否則可能會排除 Safari，即使它可能也能工作。別忘了用戶自己可以更改他們的用戶代理——我曾經(jīng)將我的瀏覽器設(shè)置為識別為“Googlebot/1.0”，這樣我就可以訪問網(wǎng)站所有者認(rèn)為僅供抓取的內(nèi)容！

因此，隨著時間的推移，這種瀏覽器檢測已成為一個不可能解開的亂麻，並且在很大程度上已不再使用，取而代之的是更好的東西——特性檢測。

特性檢測只是測試我們想要使用的特性。例如，如果我們需要getBoundingClientRect（獲取元素相對於視口的位置），那麼重要的是瀏覽器是否支持它，而不是它是哪個瀏覽器；因此，與其測試受支持的瀏覽器，不如測試特性本身：

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 瀏覽器支持此函數(shù)
}

不支持該函數(shù)的瀏覽器將返回“undefined”類型，因此不會通過條件。無需在任何特定瀏覽器中測試腳本，我們就知道它要么正確工作，要么靜默失敗。

或者我們……？

但事實是——特性檢測也不是完全可靠的——有時它會失敗。因此，讓我們現(xiàn)在看看一些示例，看看我們可以做些什麼來解決每個案例。

ActiveX 對象

也許特性檢測失敗最著名的例子是測試 ActiveXObject 以在 Internet Explorer 中進(jìn)行 Ajax 請求。

ActiveX 是後期綁定對象的示例，其實際意義是您無法知道它是否受支持直到您嘗試使用它。因此，如果用戶禁用了 ActiveX，則以下代碼將引發(fā)錯誤：

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我們認(rèn)為此瀏覽器是 IE5
}

要解決此問題，我們需要使用異常處理——嘗試實例化對象，捕獲任何失敗，並相應(yīng)地處理它：

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

映射到 DOM 屬性的 HTML 屬性

屬性映射通常用於測試與 HTML5 屬性一起使用的 API 的支持。例如，通過查找可拖動屬性來檢查具有 [draggable="true"] 的元素是否支持拖放 API：

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 瀏覽器支持此函數(shù)
}

這裡的問題是 IE8 或更早版本會自動將所有HTML 屬性映射到 DOM 屬性。這就是為什麼 getAttribute 在這些舊版本中如此混亂的原因，因為它根本不返回屬性，而是返回 DOM 屬性。

這意味著如果我們使用已經(jīng)具有屬性的元素：

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

那麼即使它們不支持，IE8 或更早版本也會返回 true 用於 ("draggable" in element)。

屬性可以是任何內(nèi)容：

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我們有一個請求對象
  }
}

但結(jié)果將相同——IE8 或更早版本將返回 true 用於 ("nonsense" in element)。

在這種情況下，解決方案是使用不具有該屬性的元素進(jìn)行測試，最安全的方法是使用創(chuàng)建的元素：

if ("draggable" in element) {
  // 瀏覽器支持拖放
}

對用戶行為的假設(shè)

您可能已經(jīng)看到使用以下代碼來檢測觸摸設(shè)備：

<div draggable="true"> ... </div>

大多數(shù)觸摸設(shè)備在觸發(fā)點擊事件之前會實現(xiàn)人工延遲（通常約為 300 毫秒），這是為了避免在雙擊元素的同時也點擊它們。但這會使應(yīng)用程序感覺遲緩且無響應(yīng)，因此開發(fā)人員有時會使用該特性測試來分叉事件：

<div nonsense="true"> ... </div>

但是，此條件源於一個錯誤的假設(shè)——因為設(shè)備支持觸摸，因此將使用觸摸。但是觸摸屏筆記本電腦呢？用戶可能正在觸摸屏幕，也可能正在使用鼠標(biāo)或觸控板；上面的代碼無法處理這種情況，因此用鼠標(biāo)單擊將不會執(zhí)行任何操作。

在這種情況下，解決方案根本不是測試事件支持——而是同時綁定兩個事件，然後使用 preventDefault 來阻止觸摸生成點擊：

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我們認(rèn)為此瀏覽器是 IE5
}

完全不起作用的東西

承認(rèn)這一點很痛苦，但有時我們不需要測試的不是特性——而是瀏覽器——因為特定瀏覽器聲稱支持某些不起作用的東西。最近的一個例子是 Opera 12 中的 setDragImage()（這是拖放 dataTransfer 對象的一種方法）。

特性測試在這裡失敗是因為 Opera 12 聲稱支持它；異常處理也無濟(jì)於事，因為它不會引發(fā)任何錯誤。它只是不起作用：

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

現(xiàn)在，如果您只想嘗試添加自定義拖動圖像，並且樂於在不支持的情況下保留默認(rèn)值（這將發(fā)生），那麼這可能很好。但是，如果您的應(yīng)用程序確實需要自定義圖像，以至於不支持它的瀏覽器應(yīng)該使用完全不同的實現(xiàn)（即使用自定義 JavaScript 來實現(xiàn)所有拖動行為）呢？

或者，如果瀏覽器實現(xiàn)了某些功能，但存在無法避免的渲染錯誤呢？有時我們別無選擇，只能明確檢測有問題的瀏覽器，並將其排除在使用它本來會嘗試支持的功能之外。

因此，問題變成了——實現(xiàn)瀏覽器檢測最安全的方法是什麼？

我有兩點建議：

1. 優(yōu)先使用專有對象測試而不是 navigator 信息。
2. 將其用於排除瀏覽器而不是包含瀏覽器。

例如，可以使用 window.opera 對象檢測 Opera 12 或更早版本，因此我們可以使用該排除來測試可拖動支持：

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 瀏覽器支持此函數(shù)
}

最好使用專有對象而不是標(biāo)準(zhǔn)對象，因為當(dāng)發(fā)布新瀏覽器時，測試結(jié)果不太可能發(fā)生變化。以下是一些我最喜歡的示例：

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

對象測試也可以與特性測試結(jié)合使用，以確定特定瀏覽器中特定特性的支持，或者在緊急情況下，定義更精確的瀏覽器條件：

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我們有一個請求對象
  }
}

我們已經(jīng)註意到用戶代理字符串是一個不可靠的混亂，但供應(yīng)商字符串實際上相當(dāng)可預(yù)測，並且可以用來可靠地測試 Chrome 或 Safari：

if ("draggable" in element) {
  // 瀏覽器支持拖放
}

所有這一切的黃金法則是要極其小心。確保您在盡可能多的瀏覽器中測試條件，並仔細(xì)考慮它們的向前兼容性——目標(biāo)是使用瀏覽器條件來排除瀏覽器，因為存在已知的錯誤，而不是因為已知的特性而包含它們（這就是特性測試的目的）

從根本上說，始終首先假設(shè)完全符合特性測試——除非您知道情況並非如此，否則假設(shè)特性將按預(yù)期工作。

選擇測試語法

在結(jié)束之前，我想檢查一下我們可以用於對象和特性測試的不同類型的語法。例如，近年來，以下語法已變得很常見：

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我們認(rèn)為此瀏覽器是 IE5
}

過去我們無法使用它，因為 IE5 及其同類產(chǎn)品會因語法而引發(fā)錯誤；但現(xiàn)在我們不必支持這些瀏覽器，這已不再是問題。

從本質(zhì)上講，它與以下內(nèi)容完全相同，但編寫起來更短：

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

但是，測試條件通常依賴於自動類型轉(zhuǎn)換：

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 瀏覽器支持此函數(shù)
}

我們在某些瀏覽器對象測試（例如window.opera 測試）中早些時候使用了該語法，這是安全的，因為對像如何評估——任何已定義的對像或函數(shù)都將始終評估為true，而如果它未定義，則將評估為false。

但是我們可能正在測試有效返回 null 或空字符串的東西，這兩者都評估為 false。例如，style.maxWidth 屬性有時用於排除 IE6：

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

只有在支持 maxWidth 屬性並且具有作者定義的值時，它才會評估為 true，因此如果我們這樣編寫測試，它可能會失?。?/p>

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我們有一個請求對象
  }
}

一般規(guī)則是這樣的：依賴於自動類型轉(zhuǎn)換對於對象和函數(shù)是安全的，但對於字符串和數(shù)字或可能為 null 的值並不一定安全。

話雖如此——如果您能安全地使用它，那就這樣做，因為它在現(xiàn)代瀏覽器中通常要快得多（可能是因為它們針對這種類型的條件進(jìn)行了優(yōu)化）。

有關(guān)此內(nèi)容的更多信息，請參閱：現(xiàn)實世界中的自動類型轉(zhuǎn)換。

關(guān)於 JavaScript 特性檢測的常見問題

什麼是 JavaScript 特性檢測，為什麼它很重要？

JavaScript 特性檢測是開發(fā)人員用來確定用戶瀏覽器是否支持特定特性或 API 的一種技術(shù)。這至關(guān)重要，因為並非所有瀏覽器都支持 JavaScript 的所有特性。通過使用特性檢測，開發(fā)人員可以為不受支持的特性提供替代解決方案或後備方案，確保網(wǎng)站或應(yīng)用程序在不同瀏覽器上都能正確運行。這增強(qiáng)了用戶體驗並確保了兼容性。

JavaScript 特性檢測是如何失敗的？

JavaScript 特性檢測可能會由於多種原因而失敗。一個常見的原因是特性檢測代碼的實現(xiàn)不正確。例如，如果代碼檢查對像中不存在的屬性，它將返回 undefined，導(dǎo)致假陰性。另一個原因可能是瀏覽器的怪癖或錯誤，這可能會導(dǎo)致特性檢測給出不準(zhǔn)確的結(jié)果。

特性檢測和瀏覽器檢測有什麼區(qū)別？

特性檢測涉及檢查用戶瀏覽器是否支持特定特性或 API，而瀏覽器檢測則識別用戶的瀏覽器和版本。雖然這兩種技術(shù)都旨在確保兼容性和功能性，但特性檢測通常被認(rèn)為是一種更好的實踐，因為它直接檢查特性，而不是根據(jù)瀏覽器類型或版本來假設(shè)其支持。

如何使用 JavaScript 檢測移動設(shè)備？

您可以使用 JavaScript 中的 navigator.userAgent 屬性來檢測移動設(shè)備。此屬性返回一個字符串，表示瀏覽器的用戶代理標(biāo)頭。通過檢查此字符串中的特定關(guān)鍵字（例如“Android”、“iPhone”或“iPad”），您可以確定用戶是否在移動設(shè)備上。

什麼是 Feature.js，它如何幫助進(jìn)行特性檢測？

Feature.js 是一個輕量級、快速且簡單的 JavaScript 實用程序，用於特性檢測。它提供易於使用的 API，允許開發(fā)人員測試瀏覽器是否支持特定特性。這有助於為不受支持的特性提供後備方案或替代解決方案，從而增強(qiáng)網(wǎng)站或應(yīng)用程序的兼容性和功能性。

什麼是 Modernizr，它如何幫助進(jìn)行特性檢測？

Modernizr 是一個 JavaScript 庫，可幫助開發(fā)人員利用 HTML5 和 CSS3 特性，同時保持與舊版瀏覽器的兼容性。它使用特性檢測來檢查瀏覽器是否支持特定特性，並將類添加到 HTML 元素，允許您在樣式表或 JavaScript 中定位特定瀏覽器功能。

如何使用 device-detector-js 包進(jìn)行特性檢測？

device-detector-js 包是用於設(shè)備檢測的強(qiáng)大工具。它解析用戶代理字符串並檢測智能手機(jī)、平板電腦、臺式機(jī)、電視機(jī)等設(shè)備。它還檢測瀏覽器、引擎、操作系統(tǒng)和其他有用信息。您可以使用此包根據(jù)檢測到的設(shè)備調(diào)整網(wǎng)站或應(yīng)用程序的行為。

實施特性檢測的一些最佳實踐是什麼？

實施特性檢測的一些最佳實踐包括：使用可靠且經(jīng)過測試的庫（如Modernizr 或Feature.js）、在不同的瀏覽器和設(shè)備上徹底測試您的特性檢測代碼、為不受支持的特性提供替代解決方案或後備方案以及避免根據(jù)瀏覽器類型或版本來假設(shè)特性支持。

特性檢測能否幫助提高網(wǎng)站性能？

是的，特性檢測可以幫助提高網(wǎng)站性能。通過檢測不受支持的特性並提供替代解決方案或後備方案，您可以防止不必要的代碼在瀏覽器中運行。這可以減少加載時間並提高網(wǎng)站的整體性能。

如何了解不同瀏覽器支持的最新特性？

由於 Web 開發(fā)的快速發(fā)展，了解不同瀏覽器支持的最新特性可能具有挑戰(zhàn)性。但是，Mozilla 開發(fā)者網(wǎng)絡(luò) (MDN)、Can I Use 和 JavaScript 文檔等資源可以提供有關(guān)不同瀏覽器中特性支持的最新信息。

以上是當(dāng)JavaScript功能檢測失敗時的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！