JavaScript的瀏覽器檢測

 因爲每一個瀏覽器都具備本身獨到的擴展，因此在開發階段來判斷瀏覽器是一個很是重要

的步驟。雖然瀏覽器開發商在公共接口方面投入了不少精力，努力的去支持最經常使用的公共功

能；但在現實中，瀏覽器之間的差別，以及不一樣瀏覽器的「怪癖」倒是很是多的，所以客戶

端檢測除了是一種補救措施，更是一種行之有效的開發策略。

 

一．navigator對象

navigator 對象最先由Netscape Navigator2.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 {
new ActiveXObject(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 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
//Firefox3.6.28
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.28) Gecko/20120306 Firefox/3.6.28
//Chrome20.0.1132.57 m
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko)Chrome/20.0.1132.57 Safari/536.11
//Safari5.1.7
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
//IE7.0
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR
2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
//IE8.0
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR
1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
//IE6.0
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR
2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
//Opera12.0
Opera/9.80 (Windows NT 5.1; U; zh-cn) Presto/2.10.289 Version/12.00
//Opera7.54
Opera/7.54 (Windows NT 5.1; U) [en]
//Opera8
Opera/8.0 (Window NT 5.1; U; en)
Konqueror (Linux 集成，基於KHTML 呈現引擎的瀏覽器)
Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)

只要仔細的閱讀這些字符串，咱們能夠發現，這些字符串包含了瀏覽器的名稱、版本和
所宿主的操做系統。

每一個瀏覽器有它本身的呈現引擎：所謂呈現引擎，就是用來排版網頁和解釋瀏覽器的引
擎。經過代理字符串發現，咱們概括出瀏覽器對應的引擎：
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 p in window.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';
} else if (/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 相關的版本，這裏咱們就不
去深究了，提供代碼和對應列表。