由於每個瀏覽器都具有自己獨到的擴充,所以在開發階段去判斷瀏覽器是一個非常重要的步驟,雖然瀏覽器開發商在公用介面方面投入了很多精力,努力的去支援最常用的公用功能;但是在現實中,瀏覽器之間的差異,以及不同瀏覽器的“怪癖”卻是非常多的,因此用戶端檢測除了是一種補救措施,更是一種行之有效開發策略。
在介紹瀏覽器檢測方法之前必須要瞭解一個對象,那就是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的標識符//跨瀏覽器檢測是否支援Flashfunction hasFlash(){var result=hasPlugin('Flash');if(。result){result=hasIEPlugin('ShockwaveFlash.ShockwaveFlash');}return result;}//檢測Flashalert (hasFlash());
小結:這些基礎知識讓我想起了,在瀏覽網頁的時候,有時候頁面會彈出提示框,說什麼沒安裝Flash或者是其他什麼外掛程式了控制項了等等,或許那些檢測就是基於上述的基礎知識而來的吧。