JavaScript是前端開發(fā)的主要語(yǔ)言，我們可以通過(guò)編寫JavaScript程序來(lái)判斷瀏覽器的類型及版本。JavaScript判斷瀏覽器類型一般有兩種辦法，一種是根據(jù)各種瀏覽器獨(dú)有的屬性來(lái)分辨，另一種是通過(guò)分析瀏覽器的userAgent屬性來(lái)判斷的。在許多情況下，值判斷出瀏覽器類型之后，還需判斷瀏覽器版本才能處理兼容性問(wèn)題，而判斷瀏覽器的版本一般只能通過(guò)分析瀏覽器的userAgent才能知道。
navigator對(duì)象
包含了正在使用的 Navigator 的版本信息。 JavaScript 客戶端運(yùn)行時(shí)刻引擎自動(dòng)創(chuàng)建 navigator 對(duì)象。詳細(xì)的介紹可以參照【http://www.itlearner.com/code/js_ref/brow1.htm】，這里只是簡(jiǎn)單說(shuō)下其屬性和方法。
屬性概覽
appCodeName 指定瀏覽器的代碼名稱。
appName 指定瀏覽器的名稱。
appVersion 指定 Navigator 的版本信息。
language 標(biāo)明正在使用的 Navigator 的翻譯語(yǔ)種。
mimeTypes 客戶端支持的所有 MIME 類型數(shù)組。
platform 標(biāo)明了 Navigator 編譯適合的機(jī)器類型。
plugins 客戶端已安裝的所有插件數(shù)組。
userAgent 指定了用戶代理頭。
方法概覽
javaEnabled 測(cè)試是否允許 Java。
plugins.refresh 使新安裝的插件有效，并可選重新裝入已打開的包含插件的文檔。
preference 允許一個(gè)已標(biāo)識(shí)的腳本獲取并設(shè)置特定的 Navigator 參數(shù)。
taintEnabled 指定是否允許數(shù)據(jù)污點(diǎn)。
簡(jiǎn)單標(biāo)注一下，判斷瀏覽器的名稱可以根據(jù)appName判斷，例如：
var ie=navigator.appName == “Microsoft Internet Explorer” ? true : false;
瀏覽器的特征及其userAgent
關(guān)于各種瀏覽器的特征及其userAgent，可以參照【http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html】，這篇文章介紹的比較詳細(xì)。
簡(jiǎn)單羅列如下：
IE
只有IE支持創(chuàng)建ActiveX控件，因此她有一個(gè)其他瀏覽器沒(méi)有的東西，就是ActiveXObject函數(shù)。
而IE各個(gè)版本典型的userAgent如下：
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
其中，版本號(hào)是MSIE之后的數(shù)字。
Firefox
Firefox中的DOM元素都有一個(gè)getBoxObjectFor函數(shù)，用來(lái)獲取該DOM元素的位置和大�。↖E對(duì)應(yīng)的中是getBoundingClientRect函數(shù)）。
這是Firefox獨(dú)有的，判斷它即可知道是當(dāng)前瀏覽器是Firefox。
Firefox幾個(gè)版本的userAgent大致如下：
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12 其中，版本號(hào)是Firefox之后的數(shù)字。
Opera
Opera提供了專門的瀏覽器標(biāo)志，就是window.opera屬性。
Opera典型的userAgent如下：
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
其中，版本號(hào)是靠近Opera的數(shù)字。
Safari
Safari瀏覽器中有一個(gè)其他瀏覽器沒(méi)有的openDatabase函數(shù)，可做為判斷Safari的標(biāo)志。
Safari典型的userAgent如下：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
其版本號(hào)是Version之后的數(shù)字。
Chrome
Chrome有一個(gè)MessageEvent函數(shù)，但Firefox也有。不過(guò)，好在Chrome并沒(méi)有Firefox的getBoxObjectFor函數(shù)，根據(jù)這個(gè)條件還是可以準(zhǔn)確判斷出Chrome瀏覽器的。
目前，Chrome的userAgent是：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
其中，版本號(hào)在Chrome之后的數(shù)字。
有趣的是，Chrome的userAgent還包含了Safari的特征，也許這就是Chrome可以運(yùn)行所有Apple瀏覽器應(yīng)用的基礎(chǔ)吧。
Navigator
目前，Navigator的userAgent是：
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080219 Firefox/2.0.0.12 Navigator/9.0.0.6
其中，版本號(hào)在Navigator之后的數(shù)字。
通過(guò)觀察以上各瀏覽器的差異，可以用JavaScript區(qū)分出各瀏覽器的，但沒(méi)有判斷是否兼容w3c標(biāo)準(zhǔn)，看了看ExtJs的源代碼，發(fā)現(xiàn)其中就有對(duì)瀏覽器類型以及版本和操作系統(tǒng)的判斷。
源碼如下：
ua = navigator.userAgent.toLowerCase(),
check = function(r){
return r.test(ua);
},
isStrict = document.compatMode == “CSS1Compat”,
isOpera = check(/opera/),
isChrome = check(/chrome/),
isWebKit = check(/webkit/),
isSafari = !isChrome && check(/safari/),
isSafari3 = isSafari && check(/version\/3/),
isSafari4 = isSafari && check(/version\/4/),
isIE = !isOpera && check(/msie/),
isIE7 = isIE && check(/msie 7/),
isIE8 = isIE && check(/msie 8/),
isGecko = !isWebKit && check(/gecko/),
isGecko3 = isGecko && check(/rv:1\.9/),
isBorderBox = isIE && !isStrict,
isWindows = check(/windows|win32/),
isMac = check(/macintosh|mac os x/),
isAir = check(/adobeair/),
isLinux = check(/linux/)
關(guān)于document.compatMode
IE對(duì)盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對(duì)于盒模型的解釋和其他的標(biāo)準(zhǔn)瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認(rèn)又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當(dāng)前的文檔渲染方式。
document.compatMode正好派上用場(chǎng)，它有兩種可能的返回值：BackCompat和CSS1Compat，對(duì)其解釋如下：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
在實(shí)際的項(xiàng)目中，我們還需要在獲取瀏覽是否IE，這樣就可以得到IE的渲染模式了。在ExtJs中的代碼：isBorderBox=isIE&&!isStrict。
當(dāng)文檔有了標(biāo)準(zhǔn)聲明時(shí)， document.compatMode 的值就等于 “CSS1compat”， 因此， 我們可以根據(jù) document.compatMode 的值來(lái)判斷文檔是否加了標(biāo)準(zhǔn)聲明
var height = document.compatMode==”CSS1Compat” ? document.documentElement.clientHeight : document.body.clientHeight;