讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議159:推薦根據瀏覽器特性進行檢測 >

建議159:推薦根據瀏覽器特性進行檢測

不同瀏覽器對JavaScript的兼容性是不同的,尤其是IE與其他瀏覽器之間,甚至不同版本的IE之間,也會有所不同。解決辦法有以下3種:

❑檢測瀏覽器的名稱、版本等屬性或其他辨別特性,根據不同引擎編寫不同的代碼。

❑堅持編寫符合JavaScript標準的代碼,運行在支持標準的瀏覽器上。

❑使用第三方技術,如jQuery等JavaScript框架,這樣就不用考慮兼容性問題。

第二種方法目前來說還不太現實,因為IE市場份額還很大,並且IE與其他瀏覽器在對標準的支持方面存在很大的差異,特別是IE定義了很多私有屬性或用法,兼容問題靠標準不能夠完全解決,只能寄希望於未來瀏覽器開發商都自覺遵循國際標準。

第三種方法其實是迂迴做法,把兼容的事情交給第三方開發商去做。很多中小企業會選擇這種做法,一些大企業也會使用這一類框架。但在一些場合可能不會使用框架,或許是因為應用很簡單,不想用框架,也或許其他什麼原因需要考慮兼容性問題。

第一種方法是最通常的做法,不過這種做法也有缺陷,即有些時候判斷的瀏覽器的類型版本號並不準確。那麼,更好做法是判斷運行當前代碼的瀏覽器是否支持正在使用的JavaScript特性。

(1)檢測瀏覽器的名稱

不同的瀏覽器對JavaScript標準的支持也不同,有時希望腳本能夠在不同的瀏覽器上都運行良好,這時需要對瀏覽器進行檢測,確定其名稱,以針對不同的瀏覽器編寫相應的腳本。

一般使用navigator對象的appName屬性,並且通過正則表達式檢測返回字符串標識符中是否包含該瀏覽器特定的字符標誌。

(2)檢測瀏覽器的版本號

隨著瀏覽器版本的更迭,瀏覽器所支持的腳本特性也在變化,有時需要針對不同的版本編寫相應的腳本,一般通過解析navigator對象的userAgent屬性來獲得瀏覽器的完整版本號。

(3)檢測客戶端的操作系統類型

navigator.userAgent屬性通常含有操作系統的基本信息,但沒有統一的規則去根據userAgent獲取準確的操作系統信息,因為這些值與瀏覽器的種類、瀏覽器的版本甚至瀏覽器的OEM版本都有關係。

通常可以檢測一些更為通用的信息,如操作系統是Windows還是Mac,而不是去檢測操作系統是Windows 7還是Windows X,其規則是所有的Windows版本都含有「Win」,所有的Macintosh版本都含有「Mac」,所有的UNIX則含有「X11」,而在Linux下則同時包含「X11」和「Linux」。


var isWin=(navigator.userAgent.indexOf(\"Win\")!=-1);

var isMac=(navigator.userAgent.indexOf(\"Mac\")!=-1);

var isUnix=(navigator.userAgent.indexOf(\"X11\")!=-1);


上面代碼適合檢測不同的操作系統,並根據不同的操作系統為應用設置不同的字體或位置等樣式。

(4)檢測瀏覽器對特定對象的支持

要編寫對多種瀏覽器或瀏覽器的多個版本都能適用的腳本,就要檢測一下瀏覽器是否支持某個對象。當然這種檢測主要是針對那些潛在的不兼容對象的語句。

例如,早期的瀏覽器對img元素的支持差別很大,因此,要在腳本中操作img元素,需要檢測瀏覽器是否支持。這時不需要對所有可能的瀏覽器一一檢測,只需在必要的地方用下面的方式進行檢測。


function rollover(imgName,imgSrc){

if(document.images){

//執行語句

}

}


如果document.images對像不存在,那麼if求值的結果為false。這種方法使對象的檢測變得簡單易行,但要注意,對於那些不支持該對象的瀏覽器需要更好地進行處理,例如:


function getImgAreas{

var result=0;

for(var i=0;i<document.images.length;i++){

result+=(document.images[i].width*document.images[i].height);

}

return result;

}

function reportImageArea{

document.form1.imgData.value=getImgAreas;

}


這裡沒使用對像支持的檢測。如果瀏覽器支持document.images,那麼這兩個函數運行正常,否則就會拋出異常。下面對上面的代碼進行優化:


function getImgAreas{

var result;

if(document.images){

result=0;

for(var i=0;i<document.images.length;i++){

result+=(document.images[i].width*document.images[i].height);

}

return result;

}

function reportImageArea{

var imgArea=getImgAreas;

var output;

if(imgArea==null){

output=\"Unknown\";

}else{

output=imgArea;

}

document.reportForm.imgData.value=output;

}


這樣不管瀏覽器是否支持該對象,都能向用戶提供比較合理的信息,而不會只簡單地跳出錯誤信息。

(5)檢測瀏覽器對特定屬性和方法的支持

檢測一個對象是否含有某個特定的屬性或方法,可以使用如下代碼進行判斷:


if(objectTest&&objectPropertyTest){

//執行語句

}


先檢測對象是否存在,然後檢測對象的屬性是否存在。如果對像確實不存在,那麼該方法有效;如果屬性存在,但其值為null、0、false,那麼if語句的求值結果也將是false,因此,這種方法並不安全,最好的方法是這樣的:


if(objectReference&&typeof(objectReference.propertyName)!=\"undefined\"){

//執行語句

}


對方法的檢測也可使用如下方法:


function myFunction{

if(document.getElementById){

//這裡可以使用getElementById方法

}

}