16.瀏覽器檢測

瀏覽器檢測

學習要點：
1.navigator對象
2.客戶端檢測

因爲每一個瀏覽器都具備本身獨到的擴展，因此在開發階段來判斷瀏覽器是一個很是重要的步驟。雖然瀏覽器開發商
在公共接口方面投入了不少精力，努力的去支持最經常使用的公共功能；但在現實中，瀏覽器之間的差別，以及不一樣瀏
覽器的」怪癖「倒是很是多的，所以客戶端檢測除了是一種補救措施，更是一種行之有效的開發策略。

1、navigator對象
navigator對象最先由Netscap Navigator2.0引入的navigator對象，如今已經稱爲識別客戶端瀏覽器的實施標準。
與以前的BOM對象同樣，每一個瀏覽器中的navigator對象也都有一套本身的屬性。

navigator對象的屬性或方法

屬性或方法 說明 IE Firefox Safari/Chrome Opera
appCodeName 瀏覽器名，一般是Mozilla 3.0+ 1.0+ 1.0+ 7.0+
appName 完整的瀏覽器名稱 3.0+ 1,0+ 1.0+ 7.0+
appMinorVersion 此版本信息 4.0+ - - 9.5+
appVersion 瀏覽器版本，通常不與實際對應 3.0+ 1.0+ 1.0+ 7.0+
buildID 瀏覽器編譯版本 - 2.0+ - -
cookieEnabled 表示cookie是否啓用 4.0+ 1.0+ 1.0+ 7.0+
cpuClass 客戶端使用的cpu類型 4.0+ - - -
javaEnabled() 表示是否啓用了java 4.0+ 1.0+ 1.0+ 7.0+
language 瀏覽器的主語言 - 1.0+ 1.0+ 7.0+
mimeTypes 註冊的MIME類型數組 4.0+ 1.0+ 1.0+ 7.0+
onLine 表示瀏覽器是否連接了因特網 4.0+ 1.0+ - 9.5+
opsProfile 彷佛早就不用了，沒法查詢 4.0+ - - -
…… …… …… …… …… ……

1.瀏覽器及版本號

不一樣的瀏覽器支持的功能、屬性和方法各有不一樣。好比IE和Firefox顯示的頁面可能就會有所略微不一樣。

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

2.瀏覽器嗅探器
瀏覽器嗅探器是一段程序，有了它，瀏覽器檢測就變的簡單了。咱們這裏提供一個browserdetect.js文件，用於
判斷瀏覽器的名稱、版本號及操做系統。

調用方式 說明
BrowserDetect.browser 瀏覽器的名稱，例如Firefox，IE
BrowserDetect.version 瀏覽器的版本，好比，七、11
BrowserDetect.OS 瀏覽器所宿主的操做系統，好比windows、Linux

3.檢測插件
插件是一類特殊的程序。他能夠擴展瀏覽器的功能，經過下載安裝完成。好比，在先音樂、視頻動畫等等插件.
navigator對象的plugins屬性，這個一個數組。存儲在瀏覽器已安裝插件的完整列表。

屬性 含義
name 插件名
filename 插件的磁盤文件名
length plugins數組的元素個數
description 插件的描述信息

//列出全部的插件名
for(var i = 0 ; i < navigator.plugins.length;i++){
document.write('插件名：'+navigator.plugins[i].name + '<br />');
document.write('文件名：'+navigator.plugins[i].filename + '<br />');
document.write('描述信息：'+navigator.plugins[i].description + '<br />');
document.write('<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是否存在

4.Active X
IE瀏覽器沒有插件，可是提供了ActiveX控件。ActiveX控件一種在Web頁面中嵌入對象或組件的方法。
因爲在JS中，咱們沒法把全部已安裝的ActiveX控件遍歷出來，可是咱們仍是能夠去檢驗是否安裝了此控件。

//檢測IE中的控件
function hasIEPlugin(){
try{ //這裏叫嘗試着去執行一段代碼若是有誤就去執行catch
new ActiveXObject(name) //這裏的name必須是控件的位置標識符ID
return true; //若是這裏new成功了，沒有產生錯誤，那麼就不去執行catch
}catch(e){
return false; //若是new失敗了，就執行catch裏面的語句
}
}

alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));

//跨瀏覽器檢測Flash是否存在
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;
}

function hasIEPlugin(){
try{ //這裏叫嘗試着去執行一段代碼若是有誤就去執行catch
new ActiveXObject(name) //這裏的name必須是控件的位置標識符ID
return true; //若是這裏new成功了，沒有產生錯誤，那麼就不去執行catch
}catch(e){
return false; //若是new失敗了，就執行catch裏面的語句
}
}

function hasFlash(){
//首先先去檢測非IE的瀏覽器

var result = hasPlugin('Flash'); //若是返回true，說明檢測到了，而且不是IE瀏覽器
if(!result){ //若是沒有檢測到，說明這個瀏覽器沒有flash插件
result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
}
return result;
}
alert(hasFlash);

 

5.MIME類型
MIME類型是指多用途因特網郵件擴展。它是經過因特網發送郵件消息的標準格式。如今也被用於在因特網中交換
各類類型的文件。

PS：mimeType[]數組在IE中不會產生輸出。

mimeType對象的屬性
屬性 含義
type MIME類型名
description MIME類型的描述信息
enabledPlugin 指定MIME類型配置好的plugin對象引用
suffixes MIME類型全部可能的文件擴展名

//遍歷非IE下全部MIME類型信息
for(var i = 0 ; i<navigator.mimeType.length ; i++){
if(navigator.mimeType[i].enabledPlugin != null){
document.write('<dl>');
document.write('<dd>類型名稱：'+navigator.mimeType[i].type+'</dd>');
document.write('<dd>類型引用：'+navigator.mimeType[i].enabledPlugin.name+'</dd>');
document.write('<dd>類型引用：'+navigator.mimeType[i].description+'</dd>');
document.write('<dd>類型引用：'+navigator.mimeType[i].suffixes+'</dd>');
document.write('</dl>');
}
}

2、客戶端檢測
客戶端檢測一共分爲三種，分別爲：能力檢測、怪癖檢測和用戶代理檢測，經過這三種檢測方案，咱們能夠充分
的瞭解當前瀏覽器所處系統、所支持的語法、所具備的特殊性能。

1.能力檢測
能力檢測又稱爲特性檢測，檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。能力檢測沒必要估計特定
的瀏覽器，只須要肯定當前瀏覽器是否支持特定的能力，就能夠給出可行的解決方案。

//BOM章節的一段程序
var width = window.innerWidth; //這裏要加window，由於IE會無效
if(typeof width !='number'){
if(document.compatMode == 'CSS1Compat'){ //若是使用IE，就使用document
width = document.documentElement.clientWidth;
}else{
width = document.body.clientWidth; //非標準模式使用body
}
}

PS：上面其實有兩塊地方使用能力檢測，第一個就是是否支持innerWidth的檢測，第二個就是是不是標準模式
的檢測，這兩個都是能力檢測。

2.怪癖檢測（bug檢測）
與能力檢測相似，怪癖檢測的目標是識別瀏覽器的特殊行爲，但與能力檢測確認瀏覽器支持什麼能力不一樣，怪癖
檢測是想知道瀏覽器存字什麼缺陷（bug）。
bug通常屬於個別瀏覽器獨有，在大多數新版的瀏覽器被修復。在後續的開發過程當中，若是遇到瀏覽器bug咱們
再詳細探討。
var box = {
toString : function(){} //建立一個toString()，和原型中重名了
};
for(var o in box){
alert(o); //IE瀏覽器的一個bug，不被識別
}

3.用戶代理檢測
用戶代理檢測經過用戶代理字符串來肯定實際使用的瀏覽器，在每一次HTTP請求過程當中，用戶代理字符串是做爲
響應首部發送的，並且該字符串能夠經過Javascript的navigator.userAgent屬性訪問。
用戶代理檢測，主要經過navigator.userAgent來獲取用戶代理字符串的，經過這組字符串，咱們來獲取當前瀏覽
器的版本號、瀏覽器名稱、系統名稱。
PS：在服務器端，經過檢測用戶代理字符串肯定用戶使用的瀏覽器是一種比較廣爲接受的作法，但在客戶端，這
種檢測被看成是一種萬不得已的作法，且飽受爭議，其實優先級排在能力檢測或怪癖檢測以後。飽受爭議的緣由
是由於它具備必定的欺騙性。

document.write(navigator.userAgent); //獲得用戶代理字符串

每一個瀏覽器都有它本身的呈現的引擎：所謂呈現引擎，就是用來排版網頁和解釋瀏覽器的引擎。經過代理字符串
發現，咱們概括出瀏覽器對應的引擎；
IE--Trident； IE8體現出來了，以前的未體現
Firefox--Gecko；
Opera--Presto； 舊版本根本沒法體現呈現引擎
Chrome--WebKit WebKit是KHTML呈現引擎的一個分支，後獨立開來
Safari--WebKit
Konquetor--KHTML

有上面的狀況，咱們須要檢測呈現引擎能夠分爲五大類：IE、Gecko、WebKit、KHTML和Opera。

var client = function(){ //建立一個對象
var engine={ //呈現引擎
ie : false,
gecko : false,
webkit : false,
khtml : false,
opera : false

ver : 0 //具體的版本號
};
return{
engine : engine //返回呈現引擎對象
};
}();

alert(client.engine.ie); //獲取ie