關(guān)鍵要點(diǎn)

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

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

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

但是，當(dāng)我第一次加入這個(gè)行業(yè)時(shí)，軍備競賽就已經(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”（由于歷史原因，幾乎每個(gè)瀏覽器都聲稱自己是 Mozilla）。

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

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

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

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

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

或者我們……？

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

ActiveX 對象

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

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

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

要解決此問題，我們需要使用異常處理——嘗試實(shí)例化對象，捕獲任何失敗，并相應(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 的支持。例如，通過查找可拖動(dòng)屬性來檢查具有 [draggable="true"] 的元素是否支持拖放 API：

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

這里的問題是 IE8 或更早版本會自動(dòng)將所有HTML 屬性映射到 DOM 屬性。這就是為什么 getAttribute 在這些舊版本中如此混亂的原因，因?yàn)樗静环祷貙傩?，而是返?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) {
    //... 我們有一個(gè)請求對象
  }
}

但結(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ā)點(diǎn)擊事件之前會實(shí)現(xiàn)人工延遲（通常約為 300 毫秒），這是為了避免在雙擊元素的同時(shí)也點(diǎn)擊它們。但這會使應(yīng)用程序感覺遲緩且無響應(yīng)，因此開發(fā)人員有時(shí)會使用該特性測試來分叉事件：

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

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

在這種情況下，解決方案根本不是測試事件支持——而是同時(shí)綁定兩個(gè)事件，然后使用 preventDefault 來阻止觸摸生成點(diǎn)擊：

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

完全不起作用的東西

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

特性測試在這里失敗是因?yàn)?Opera 12 聲稱支持它；異常處理也無濟(jì)于事，因?yàn)樗粫l(fā)任何錯(cuò)誤。它只是不起作用：

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

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

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

我有兩點(diǎn)建議：

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

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

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

最好使用專有對象而不是標(biāo)準(zhǔn)對象，因?yàn)楫?dāng)發(fā)布新瀏覽器時(shí)，測試結(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) {
    //... 我們有一個(gè)請求對象
  }
}

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

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

所有這一切的黃金法則是要極其小心。確保您在盡可能多的瀏覽器中測試條件，并仔細(xì)考慮它們的向前兼容性——目標(biāo)是使用瀏覽器條件來排除瀏覽器，因?yàn)榇嬖谝阎腻e(cuò)誤，而不是因?yàn)橐阎奶匦远鼈儯ㄟ@就是特性測試的目的）

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

選擇測試語法

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

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

過去我們無法使用它，因?yàn)?IE5 及其同類產(chǎn)品會因語法而引發(fā)錯(cuò)誤；但現(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>

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

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

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

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

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

只有在支持 maxWidth 屬性并且具有作者定義的值時(shí)，它才會評估為 true，因此如果我們這樣編寫測試，它可能會失敗：

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

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

話雖如此——如果您能安全地使用它，那就這樣做，因?yàn)樗诂F(xiàn)代瀏覽器中通常要快得多（可能是因?yàn)樗鼈冡槍@種類型的條件進(jìn)行了優(yōu)化）。

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

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

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

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

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

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

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

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

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

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

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

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

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

Modernizr 是一個(gè) JavaScript 庫，可幫助開發(fā)人員利用 HTML5 和 CSS3 特性，同時(shí)保持與舊版瀏覽器的兼容性。它使用特性檢測來檢查瀏覽器是否支持特定特性，并將類添加到 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)用程序的行為。

實(shí)施特性檢測的一些最佳實(shí)踐是什么？

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

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

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

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

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

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