支持沒有這樣的瀏覽器新功能

可能重複：
Browser detection versus feature detection 支持沒有這樣的瀏覽器新功能

我一直在閱讀有關（使用谷歌/維基/文檔）功能檢測，但不完全得到它的一個抓地力。彈出一些問題

爲什麼需要特徵檢測。我們不能只檢測瀏覽器併爲其編寫代碼嗎？
不同的特徵檢測方法。最好的都是？
你可以給我一個實際的現實世界的例子，特徵檢測的作品。我們如何處理舊瀏覽器以及如何在其中複製相同的功能>

來源

2012-11-06 Tom Hodder

** 2：**沒有多種方法可以進行功能檢測。只有一個：'if（featureExists）{/ * use feature * /} else {/ * fallback solution * /}'。 –

http://msdn.microsoft.com/en-us/magazine/hh475813.aspx –

@ŠimeVidas - 有。您無法通過這種方式真正檢查CSS功能。 –

爲什麼需要Feature Detection。我們不能只檢測瀏覽器併爲其編寫代碼嗎？

不，很快你的列表顯示每個瀏覽器所做的更新都會過時，而且它的本質也是不完整的。（三年前的黑莓瀏覽器是否支持佔位符文本輸入？我不知道，也不需要關心。）例如，它曾經是IE沒有addEventListener。現在確實如此。如果您開始一直檢測到瀏覽器版本級別，那麼當新版本發佈時，您會做什麼？這是一個維護噩夢。

不同的特徵檢測方法。最好的都是？

有沒有單一的功能檢測，它取決於功能。你可以找到一個偉大的功能檢測列表on this page。還有像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-06 16:28:07

謝謝你這個真棒回答！ –

@TomHodder：很高興！很高興這有幫助。 –

如果你很難與JSLint抱怨使用'in'進行屬性檢查，你可以使用'eval（）'（如果你已經告訴JSLint允許它）或者'new函數（...）'。 –

因爲瀏覽器可能僞造自己的身份。另外，因爲你不可能知道所有可能的瀏覽器的功能。
取決於功能。如果它是一種JavaScript方法，通常只需像這樣檢查它：if (window.XMLHttpRequest) { alert('it supports the XML HTTP requests!'); }。不同的功能可能需要不同的方法來檢查它們。
使用與之前相同的示例 - 如果檢查返回false，您將回退創建ActiveX對象（如果支持 - 它位於較舊的IE版本上）。或者您可能會向用戶顯示一條消息，說明他們無法在應用程序中執行某些操作。

來源

2012-11-06 16:30:09

一些答案，但公開討論像往常一樣:)

1）要回答這個問題，只是想想你有多少個不同的瀏覽器及其版本在野外......你需要寫如果你想支持儘可能多的瀏覽器，每個代碼都有一個不同的代碼片段......並且通過移動瀏覽，這些數字會加起來。具有「檢測」功能的功能將允許您只寫入兩段代碼，一段用於啓用該功能的瀏覽器，另一段用於其他頁面。

2）這當然是主觀的。我用Modernizr

3）看看Modernizr可以檢測到的功能，你會看到。例如，如果要啓用地理定位客戶端，最好的方法是使用功能檢測庫，而不是保留自己的瀏覽器特定代碼數據庫（這與問題1相關）。通常，爲了涵蓋未實現的功能，您可以在if-then-else中編寫自己的代碼或使用所謂的多填充，您可以閱讀它here。基本上它們是實現舊版瀏覽器中不存在功能的代碼片斷。美麗之處在於它們是完全透明的，你只需使用它們，並不在乎它們是使用真正的實現還是回到解決方法。 sessionStorage的示例值得一讀。

來源

2012-11-06 16:35:14 Tallmaris

支持沒有這樣的瀏覽器新功能

回答

相關問題