JavaScript學習6:瀏覽器檢測

連江偉發表於2015-04-30

        由於每個瀏覽器都具有自己獨到的擴充套件,所以在開發階段去判斷瀏覽器是一個非常重要的步驟,雖然瀏覽器開發商在公共介面方面投入了很多精力,努力的去支援最常用的公共功能;但是在現實中,瀏覽器之間的差異,以及不同瀏覽器的“怪癖”卻是非常多的,因此客戶端檢測除了是一種補救措施,更是一種行之有效的開發策略。

        在介紹瀏覽器檢測方法之前必須要了解一個物件,那就是navigator物件。

        Navigator物件最早由NetscapeNavigator2.0引入,現在已經成為識別客戶端瀏覽器的事實標準,與之前的BOM物件一樣,每個瀏覽器中的navigator物件也都有一套屬於自己的屬性和方法。由於其屬性和方法較多,這裡簡單介紹幾個。

        比如要獲取瀏覽器的名稱以及版本號等資訊,如下程式碼所示 

alert('瀏覽器使用者代理字串:'+ navigator.userAgent);
alert('瀏覽器的名稱:'+ navigator.appName);
alert('瀏覽器的版本:'+ navigator.appVersion);
alert('瀏覽器所在的系統:'+ navigator.platform);

        檢測外掛

        外掛是一類特殊的程式,它可以擴充套件瀏覽器的功能,通過下載安裝完成。比如,線上音樂、視訊動畫等等外掛。Navigator物件的plugins屬性是一個陣列,儲存了瀏覽器已經安裝的外掛的完整列表。我們可以寫js程式碼顯示出所有的外掛名以及根據外掛名稱檢測瀏覽器是否安裝了外掛。程式碼如下:   

//列舉出所有的外掛名
for(var i=0;i<navigator.plugins.length;i++){
	document.write(navigator.plugins[i].name+'<br/>');
}

//檢測非IE瀏覽器外掛是否存在
function hasPlugin(name){
	var name=name.toLowerCase();
	for(var i=0;i<navigator.plugins.length;i++){
		if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
			return true;
		}
	}
	return false;
}

alert(hasPlugin('Flash'));   //檢測Flash是否存在
alert(hasPlugin('java'));    //檢測Java是否存在

        ActiveX控制元件檢測

        IE瀏覽器沒有外掛,但提供了ActiveX控制元件。ActiveX控制元件是一種在Web頁面中嵌入物件或陣列的方法。由於在js中,我們無法把所有已經安裝的ActiveX控制元件遍歷出來,但我們還是可以去檢測是否安裝了某個控制元件的。舉例如下        

//檢測IE中的控制元件
function hasIEPlugin(name){
	try{
		new ActiveXObject(name);
		return true;
	} catch(e){
		return false;
	}
}

//檢測Flash是否存在
alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));//引數為IE中代表Flash的識別符號

//跨瀏覽器檢測是否支援Flash
function hasFlash(){
	var result=hasPlugin('Flash');
	if(!result){
		result=hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
	}
	return result;
}

//檢測Flash
alert (hasFlash());
        小結:這些基礎知識讓我想起了,在瀏覽網頁的時候,有時候頁面會彈出提示框,說什麼沒安裝Flash或者是其他什麼外掛了控制元件了等等,或許那些檢測就是基於上述的基礎知識而來的吧。

相關文章