瀏覽器提供商雖然在實(shí)現(xiàn)公共接口方面投入了很多精力，但結(jié)果仍然是每一種瀏覽器都有各自的長(zhǎng)處，也都有各自的缺點(diǎn)。即使是那些跨平臺(tái)的瀏覽器，雖然從技術(shù)上看版本相同，也照樣存在不一致性問(wèn)題。面對(duì)普遍存在的不一致性問(wèn)題，開(kāi)發(fā)人員要么采取遷就各方的“最小公分母”策略，要么(也是更常見(jiàn)的)就得利用各種客戶端檢測(cè)方法，來(lái)突破或者規(guī)避種種局限性。

迄今為止，客戶端檢測(cè)仍然是Web開(kāi)發(fā)領(lǐng)域中一個(gè)飽受爭(zhēng)議的話題。一談到這個(gè)話題，人們總會(huì)不約而同地提到瀏覽器應(yīng)該支持一組最常用的公共功能。在理想狀態(tài)下，確實(shí)應(yīng)該如此。但是，在現(xiàn)實(shí)當(dāng)中，瀏覽器之間的差異以及不同瀏覽器的“怪癖”( quirk)，多得簡(jiǎn)直不勝枚舉。因此，南昌網(wǎng)站建設(shè)公司開(kāi)發(fā)工程師認(rèn)為,客戶端檢測(cè)除了是一種補(bǔ)救措施之外，更是一種行之有效的開(kāi)發(fā)策略。

檢測(cè)Web客戶端的手段很多，而且各有利弊。但最重要的還是要知道，不到萬(wàn)不得已，就不要使用客戶端檢測(cè)。只要能找到更通用的方法，就應(yīng)該優(yōu)先采用更通用的方法。一言以蔽之，先設(shè)計(jì)最通用的方案，然后再使用特定于瀏覽器的技術(shù)增強(qiáng)該方案。

客戶端能力檢測(cè)

最常用也最為人們廣泛接受的客戶端檢測(cè)形式是能力檢測(cè)(又稱特性檢測(cè))。能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力。采用這種方式不必顧及特定的瀏覽器如何如何，只要確定瀏覽器支持特定的能力，就可以給出解決方案。能力檢測(cè)的基本模式如下：

if (obj ect .propertyInQuestion)(

//使用o]oj ect.propertyInQuestion

)

舉例來(lái)說(shuō)，lE 5.0之前的版本不支持document.getElementsByld()這個(gè)DOM方法。盡管可以使用非標(biāo)準(zhǔn)的doclunent.all屬性實(shí)現(xiàn)相同的目的，但I(xiàn)E的早期版本中確實(shí)不存在document.getElementsByld()。于是，也就有了類似下面的能力檢測(cè)代碼：

function getElement( id)t

if (document.getElementByld)(

return document.getElementByld( id);

} else if( document.all){

return document.all[id];

} else{

throw new Error( "No way to retrieve element!”);

}

}

這里的getElement()函數(shù)的用途是返回具有給定ID的元素。南昌網(wǎng)站設(shè)計(jì)公司技術(shù)員告訴大家,因?yàn)閐ocument.getElementByld()是實(shí)現(xiàn)這一目的的標(biāo)準(zhǔn)方式，所以一開(kāi)始就測(cè)試了這個(gè)方法。如果該函數(shù)存在(不是未定義)，則使用該函數(shù)。否則，就要繼續(xù)檢測(cè)document.all是否存在，如果是，則使用它。如果上述兩個(gè)特性都 不存在(很有可能)，則創(chuàng)建并拋出錯(cuò)誤，表示這個(gè)函數(shù)無(wú)法使用。

要理解能力檢測(cè)，首先必須理解兩個(gè)重要的概念。如前所述，第一個(gè)概念就是先檢測(cè)達(dá)成目的的最常用的特性。對(duì)前面的例子來(lái)說(shuō)，就是要先檢測(cè)document.getElementByld()，后檢測(cè)document.all。先檢測(cè)最常用的特性可以保證代碼最優(yōu)化，因?yàn)樵诙鄶?shù)情況下都可以避免測(cè)試多個(gè)條件。

第二個(gè)重要的概念就是必須測(cè)試實(shí)際要用到的特性。一個(gè)特性存在，不一定意味著另一個(gè)特性也存在。來(lái)看一個(gè)例子：

function getWindowWidth(){

if(document.all){//假設(shè)是IE

return document.do cumentElement.clientWidth：//錯(cuò)誤的用法!!!

} else{

return window.innerWidth;

}

}

這是一個(gè)錯(cuò)誤使用能力檢測(cè)的例子。getWindowWidth()函數(shù)首先檢查document.all是否存在，如果是則返回document.documentElement.clientWidth，第8章曾經(jīng)討論過(guò)，IE確實(shí)不支持window.innerWidth屬性。但問(wèn)題是document.all存在也不一定表示瀏覽器就是IE。實(shí)際上，也可能是Opera; Opera支持document.all，也支持window.innerWidth。

檢測(cè)某個(gè)或某幾個(gè)特性并不能夠確定瀏覽器。下面給出的這段代碼(或與之差不多的代碼)可以在許多網(wǎng)站中看到，這種“瀏覽器檢測(cè)”代碼就是錯(cuò)誤地依賴能力檢測(cè)的典型示例：

//錯(cuò)誤!還不夠具體

var isFirefox=!!(navigator.vendor&&navigator.vendorSub);

//錯(cuò)誤!假設(shè)過(guò)頭了

var isIE= !!(document.all&&document.uniqueID);

這兩行代碼代表了對(duì)能力檢測(cè)的典型誤用。以前，確實(shí)可以通過(guò)檢測(cè)navigator.vendor和navigator.vendorSub來(lái)確定Firefox瀏覽器。但是，Safari也依葫蘆畫瓢地實(shí)現(xiàn)了相同的屬性。于是，這段代碼就會(huì)導(dǎo)致人們作出錯(cuò)誤的判斷。為檢測(cè)IE，代碼測(cè)試了document.all和document.uniqueID。這就相當(dāng)于假設(shè)IE將來(lái)的版本中仍然會(huì)繼續(xù)存在這兩個(gè)屬性，同時(shí)還假設(shè)其他瀏覽器都不會(huì)實(shí)現(xiàn)這兩個(gè)屬性。最后，這兩個(gè)檢測(cè)都使用了雙邏輯非操作符來(lái)得到布爾值(比先存儲(chǔ)后訪問(wèn)的效果更好)。

實(shí)際上，根據(jù)瀏覽器不同將能力組合起來(lái)是更可取的方式。如果你知道自己的應(yīng)用程序需要使用某些特定的瀏覽器特性，那么最好是一次性檢測(cè)所有相關(guān)特性，而不要分別檢測(cè)。看下面的例子：

//確定瀏覽器是否支持Netscape風(fēng)格的插件

var hasNSPlugins= !!(navigator.plugins&&navigator.plugins.length);

//確定瀏覽器是否具有DOMI級(jí)規(guī)定的能力

var hasDOMl= !!(document.getElementByld&&document.createElement&&

document.getElementsByTagName);

以上例子展示了兩個(gè)檢測(cè)：一個(gè)檢測(cè)瀏覽器是否支持Netscapte風(fēng)格的插件;另一個(gè)檢測(cè)瀏覽器是否具備DOMI級(jí)所規(guī)定的能力。得到的布爾值可以在以后繼續(xù)使用，從而節(jié)省重新檢測(cè)能力的時(shí)間。

南昌網(wǎng)絡(luò)公司工程師提醒廣大開(kāi)發(fā)人員,在實(shí)際開(kāi)發(fā)中,應(yīng)該將能力檢測(cè)作為確定下一步解決方案的依據(jù),而不是用它來(lái)判斷用戶使用的是什么瀏覽器.

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://m.51yjwy.com 如轉(zhuǎn)載請(qǐng)注明出處!