/* 一．navigator對象 navigator對象最早由NetscapeNavigator2.0引入的navigator對象，現在已經成為識別客 戶端瀏覽器的事實標准。與之前的BOM對象一樣，每個瀏覽器中的navigator對象也都有 一套自己的屬性。 */
1.瀏覽器及版本號
不同的瀏覽器支持的功能、屬性和方法各有不同。比如IE和Firefox顯示的頁面可能就
會有所略微不同。
alert('瀏覽器名稱：' +navigator.appName);
alert('瀏覽器版本：' +navigator.appVersion);
alert('瀏覽器用戶代理字符串：' +navigator.userAgent);
alert('瀏覽器所在的系統：' +navigator.platform);
2.瀏覽器嗅探器
瀏覽器嗅探器是一段程序，有了它，瀏覽器檢測就變得簡單了。我們這里提供了一個
browserdetect.js文件，用於判斷瀏覽器的名稱、版本號及操作系統。
alert(BrowserDetect.browser); //名稱
alert(BrowserDetect.version); //版本
alert(BrowserDetect.OS) //系統
3.檢測插件
插件是一類特殊的程序。他可以擴展瀏覽器的功能，通過下載安裝完成。比如，在線音
樂、視頻動畫等等插件。
navigator對象的plugins屬性，這個一個數組。存儲在瀏覽器已安裝插件的完整列表。
//列出所有的插件名 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是否存在
4.ActiveX
IE瀏覽器沒有插件，但提供了ActiveX控件。ActiveX控件一種在Web頁面中嵌入對象
或組件的方法。
由於在JS中，我們無法把所有已安裝的ActiveX控件遍歷出來，但我們還是可以去驗
證是否安裝了此控件。
//檢測IE中的控件
function hasIEPlugin(name){ try{ newActiveXObject(name); return true; }catch(e){ return false; } } //檢測Flash alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));
PS：ShockwaveFlash.ShockwaveFlash是IE中代表FLASH的標識符，你需要檢查哪種
控件，必須先獲取它的標識符。
//跨瀏覽器檢測是否支持Flash function hasFlash(){ var result=hasPlugin('Flash'); if(!result){ result=hasIEPlugin('ShockwaveFlash.ShockwaveFlash'); } return result; } //檢測Flash alert(hasFlash());
5.MIME類型
MIME是指多用途因特網郵件擴展。它是通過因特網發送郵件消息的標准格式。現在也
被用於在因特網中交換各種類型的文件。
PS：mimeType[]數組在IE中不產生輸出。
//遍歷非IE下所有MIME類型信息 for(var i=0; i<navigator.mimeTypes.length; i++){ if(navigator.mimeTypes[i].enabledPlugin!=null){ document.write('<dl>'); document.write('<dd>類型名稱：' +navigator.mimeTypes[i].type+'</dd>'); document.write('<dd>類型引用：' +navigator.mimeTypes[i].enabledPlugin.name+ '</dd>'); document.write('<dd>類型描述：' +navigator.mimeTypes[i].description+'</dd>'); document.write('<dd>類型后綴：' +navigator.mimeTypes[i].suffixes+'</dd>'); document.write('</dl>') } }
二．客戶端檢測
客戶端檢測一共分為三種，分別為：能力檢測、怪癖檢測和用戶代理檢測，通過這三種
檢測方案，我們可以充分的了解當前瀏覽器所處系統、所支持的語法、所具有的特殊性能。
1.能力檢測
能力檢測又稱作為特性檢測，檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能
力。能力檢測不必估計特定的瀏覽器，只需要確定當前的瀏覽器是否支持特定的能力，就可
以給出可行的解決方案。
//BOM章節的一段程序 var width = window.innerWidth; //如果是非IE瀏覽器 if(typeof width!='number') { //如果是IE，就使用document if(document.compatMode=='CSS1Compat') { 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); //得到用戶代理字符串 Firefox14.0.1 Mozilla/5.0(WindowsNT5.1;rv:14.0)Gecko/20100101Firefox/14.0.1 Firefox3.6.28 Mozilla/5.0(Windows;U;WindowsNT5.1;zh-CN;rv:1.9.2.28)Gecko/20120306 Firefox/3.6.28 Chrome20.0.1132.57m Mozilla/5.0(WindowsNT5.1)AppleWebKit/536.11(KHTML,likeGecko) Chrome/20.0.1132.57Safari/536.11 Safari5.1.7 Mozilla/5.0(WindowsNT5.1)AppleWebKit/534.57.2(KHTML,likeGecko)Version/5.1.7 Safari/534.57.2 IE7.0 Mozilla/4.0(compatible;MSIE7.0;WindowsNT5.1;.NETCLR1.1.4322;.NETCLR 2.0.50727;.NETCLR3.0.4506.2152;.NETCLR3.5.30729) IE8.0 Mozilla/4.0(compatible;MSIE8.0;WindowsNT5.1;Trident/4.0;.NETCLR 1.1.4322;.NETCLR2.0.50727;.NETCLR3.0.4506.2152;.NETCLR3.5.30729)
IE6.0 Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;.NETCLR1.1.4322;.NETCLR 2.0.50727;.NETCLR3.0.4506.2152;.NETCLR3.5.30729) Opera12.0 Opera/9.80(WindowsNT5.1;U;zh-cn)Presto/2.10.289Version/12.00 Opera7.54 Opera/7.54(WindowsNT5.1;U)[en]
Opera8 Opera/8.0(WindowNT5.1;U;en) Konqueror(Linux集成，基於KHTML呈現引擎的瀏覽器) Mozilla/5.0(compatible;Konqueror/3.5;SunOS)KHTML/3.5.0(likeGecko)
只要仔細的閱讀這些字符串，我們可以發現，這些字符串包含了瀏覽器的名稱、版本和
所宿主的操作系統。
每個瀏覽器有它自己的呈現引擎：所謂呈現引擎，就是用來排版網頁和解釋瀏覽器的引
擎。通過代理字符串發現，我們歸納出瀏覽器對應的引擎：
IE--Trident， IE8體現出來了，之前的未體現
Firefox--Gecko，
Opera--Presto，舊版本根本無法體現呈現引擎
Chrome--WebKit WebKit是KHTML呈現引擎的一個分支，后獨立開來
Safari--WebKit
Konqueror--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
以上的代碼實現了五大引擎的初始化工作，分別給予true的初值，並且設置版本號為0。
下面我們首先要做的是判斷Opera，因為Opera瀏覽器支持window.opera對象，通過這
個對象，我們可以很容易獲取到Opera的信息。
for(var pinwindow.opera){ //獲取window.opera對象信息 document.write(p+"<br/>"); } if(window.opera){ //判斷opera瀏覽器 engine.ver=window.opera.version(); //獲取opera呈現引擎版本 engine.opera=true; //設置真 } //接下來，我們通過正則表達式來獲取WebKit引擎和它的版本號。 else if(/AppleWebKit\/(\S+)/.test(ua)){ //正則WebKit engine.ver=RegExp['$1']; //獲取WebKit版本號 engine.webkit=true; }
然后，我們通過正則表達式來獲取KHTML引擎和它的版本號。由於這款瀏覽器基於
Linux，我們無法測試。
//獲取KHTML和它的版本號
else if(/KHTML\/(\S+)/.test(ua)|| /Konqueror\/([^;]+)/.test(ua)){ engine.ver=RegExp['$1']; engine.khtml=true; }
//下面，我們通過正則表達式來獲取Gecko引擎和它的版本號。 else if(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){ //獲取Gecko和它的版本號 engine.ver=RegExp['$1']; engine.gecko=true; } //最后，我們通過正則表達式來獲取IE的引擎和它的版本號。因為IE8之前沒有呈現引 //擎，所以，我們只有通過"MSIE"這個共有的字符串來獲取。 else if(/MSIE([^;]+)/.test(ua)){ //獲取IE和它的版本號 engine.ver=RegExp['$1']; engine.ie=true; }
上面獲取各個瀏覽器的引擎和引擎的版本號，但大家也發現了，其實有些確實是瀏覽器
的版本號。所以，下面，我們需要進行瀏覽器名稱的獲取和瀏覽器版本號的獲取。
根據目前的瀏覽器市場份額，我們可以給一下瀏覽器做檢測：IE、Firefox、konq、opera、
chrome、safari。
var browser={ //瀏覽器對象 ie:false, firefox:false, konq:false, opera:false, chrome:false, safari:false, ver:0, //具體版本 name:'' //具體的瀏覽器名稱 };
//對於獲取IE瀏覽器的名稱和版本，可以直接如下： else if(/MSIE([^;]+)/.test(ua)){ engine.ver=browser.ver=RegExp['$1']; //設置版本 engine.ie=browser.ie=true; //填充保證為true browser.name='Internet Explorer'; //設置名稱 } //對於獲取Firefox瀏覽器的名稱和版本，可以如下： else if(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){ engine.ver=RegExp['$1']; engine.gecko=true; if(/Firefox\/(\S+)/.test(ua)){ browser.ver=RegExp['$1']; //設置版本 browser.firefox=true; //填充保證為true browser.name='Firefox'; //設置名稱 } }
//對於獲取Chrome和safari瀏覽器的名稱和版本，可以如下： else if(/AppleWebKit\/(\S+)/.test(ua)){ engine.ver=RegExp['$1']; engine.webkit=parseFloat(engine.ver); if(/Chrome\/(\S+)/.test(ua)){ browser.ver=RegExp['$1']; browser.chrome=true; browser.name='Chrome'; }elseif(/Version\/(\S+)/.test(ua)){ browser.ver=RegExp['$1']; browser.chrome=true; browser.name='Safari'; } }
PS：對於Safari3之前的低版本，需要做WebKit的版本號近似映射。而這里，我們將
不去深究，已提供代碼。
瀏覽器的名稱和版本號，我們已經准確的獲取到，最后，我們想要去獲取瀏覽器所宿主
的操作系統。
var system={ //操作系統 win:false, //windows mac:false, //Mac x11:false //Unix、Linux }; var p=navigator.platform; //獲取系統 system.win=p.indexOf('Win')==0; //判斷是否是windows system.mac=p.indexOf('Mac')==0; //判斷是否是mac system.x11=(p=='X11') || (p.indexOf('Linux')==0) //判斷是否是Unix、Linux
PS：這里我們也可以通過用戶代理字符串獲取到windows相關的版本，這里我們就不
去深究了，提供代碼和對應列表。
