第一百一十二節，JavaScript瀏覽器檢測

時間 2019-11-12

標籤第一百一十二 javascript 瀏覽器檢測欄目 JavaScript 简体版

原文原文鏈接

JavaScript瀏覽器檢測html

學習要點：java

1.navigator對象android

2.客戶端檢測ios

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

一．navigator對象正則表達式

navigator對象是window對象旗下的對象chrome

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

navigator對象的屬性或方法數組

屬性或方法瀏覽器	說明	IE	Firefox	Safari/Chrome	Opera
appCodeName	瀏覽器的名稱。一般是Mozilla，即便在非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類型(x8六、68K、Alpha、PPC、other)	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+	-	-	-
oscpu	客戶端計算機的操做系統或使用的CPU	-	1.0+	-	-
platform	瀏覽器所在的系統平臺	4.0+	1.0+	1.0+	7.0+
plugins	瀏覽器中安裝的插件信息的數組	4.0+	1.0+	1.0+	7.0+
preference()	設置用戶的首選項	-	1.5+	-	-
product	產品名稱（如Gecko）	-	1.0+	1.0+	-
productSub	關於產品的次要信息（如Gecko的版本）	-	1.0+	1.0+	-
registerContentHandler()	針對特定的MIME類型講一個站點註冊爲處理程序	-	2.0+	-	-
registerProtocolHandler()	針對特定的協議將一個站點註冊爲處理程序	-	2.0	-	-
securityPolicy	已經廢棄。安全策略的名稱	-	1.0+	-	-
systemLanguage	操做系統的語言	4.0+	-	-	-
taintEnabled()	已經廢棄。表示是否運行變量被修改	4.0+	1.0+	-	7.0+
userAgent	瀏覽器的用戶代理字符串	3.0+	1.0+	1.0+	7.0+
userLanguage	操做系統的默認語言	4.0+	-	-	7.0+
userProfile	藉以訪問用戶我的信息的對象	4.0+	-	-	-
vendor	瀏覽器的品牌	-	1.0+	1.0+	-
verdorSub	有關供應商的次要信息	-	1.0+	1.0+	-

1.瀏覽器及版本號

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

appName瀏覽器名稱，不怎麼精確

alert('瀏覽器名稱：' + navigator.appName);

appVersion瀏覽器版本

alert('瀏覽器版本：' + navigator.appVersion);
//返回：瀏覽器版本：5.0 (Windows)

userAgent瀏覽器用戶代理字符串，用戶瀏覽器相關信息【經常使用】

alert('瀏覽器用戶代理字符串：' + navigator.userAgent);
//返回：Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0

platform瀏覽器所在的系統【經常使用】

alert('瀏覽器所在的系統：' + navigator.platform);
//返回：瀏覽器所在的系統：Win32

2.瀏覽器嗅探器【推薦】

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

browserdetect.js文件，瀏覽器嗅探器模塊源碼

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Internet Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

將browserdetect.js文件，放到工程目錄，並將文件引入html頁面便可使用模塊的方法

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

alert(BrowserDetect.browser);            //瀏覽器名稱
//Firefox
alert(BrowserDetect.version);                //版本
//50
alert(BrowserDetect.OS);                //系統
//Windows

3.檢測插件

插件是一類特殊的程序。他能夠擴展瀏覽器的功能，經過下載安裝完成。好比，在線音樂、視頻動畫等等插件。

plugins屬性，這是一個數組。存儲在瀏覽器已安裝插件的完整列表。IE不支持

alert(navigator.plugins);//返回數組
//[object PluginArray]

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瀏覽器插件是否存在

//檢測非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) { //判斷循環到的瀏覽器插件名稱轉換小寫後，用正則查找傳入的插件名稱是否存在，返回值大於-1說明存在
            return true; //存在返回真
        }
    }
    return false; //不存在返回假
}

alert(hasPlugin('Flash'));                        //檢測Flash是否存在
alert(hasPlugin('java'));                        //檢測Java是否存在

4.ActiveX，IE瀏覽器沒有插件的說法，採用的ActiveX控件

IE瀏覽器沒有插件，但提供了ActiveX控件。ActiveX控件一種在Web頁面中嵌入對象或組件的方法。

因爲在JS中，咱們沒法把全部已安裝的ActiveX控件遍歷出來，但咱們仍是能夠去驗證是否安裝了此控件。

檢測IE中的控件

ActiveXObject()判斷瀏覽器是否支持控件，若是支持控件接收控件名稱檢測控件是否存在，存在就能夠new ActiveXObject對象，不然出錯，參數控件惟一標識符

//檢測IE中的控件
function hasIEPlugin(name) {  //建立函數
    try {   //嘗試執行，執行成功就執行裏面的代碼，若是出錯就執行catch裏面的代碼
        new ActiveXObject(name); //判斷瀏覽器是否支持控件，若是支持控件接收控件名稱檢測控件是否存在，存在就能夠new ActiveXObject對象，不然出錯
        return true; //若是new ActiveXObject對象成功返回真
    } catch (e) {
        return false; //若是出錯返回假
    }
}

//檢測Flash
alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));//執行函數，傳入惟一標識符

PS：ShockwaveFlash.ShockwaveFlash是IE中表明FLASH的標識符，你須要檢查哪一種控件，必須先獲取它的標識符

跨瀏覽器檢測是否支持Flash，就是將上面二者結合應用

//檢測非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) { //判斷循環到的瀏覽器插件名稱轉換小寫後，用正則查找傳入的插件名稱是否存在，返回值大於-1說明存在
            return true; //存在返回真
        }
    }
    return false; //不存在返回假
}

//檢測IE中的控件
function hasIEPlugin(name) {  //建立函數
    try {   //嘗試執行，執行成功就執行裏面的代碼，若是出錯就執行catch裏面的代碼
        new ActiveXObject(name); //判斷瀏覽器是否支持控件，若是支持控件接收控件名稱檢測控件是否存在，存在就能夠new ActiveXObject對象，不然出錯
        return true; //若是new ActiveXObject對象成功返回真
    } catch (e) {
        return false; //若是出錯返回假
    }
}

//跨瀏覽器檢測是否支持Flash
function hasFlash() {
    //首先調用上面函數，檢測非IE瀏覽器
    var result = hasPlugin('Flash');  //調用非IE瀏覽器插件是否存在接收插件名稱，若是返回假，說明兩個狀況，一是插件不存在，二是IE瀏覽器
    if (!result) {  //若是非IE瀏覽器插件是否存返回假
        result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash'); //執行檢測IE中的控件函數，接收控件惟一標識符名稱，
        //若是返回真，說明是IE瀏覽器，若是返回假，說明沒有Flash插件
    }
    return result; //最終返回結果
}

//檢測Flash
alert(hasFlash()); //執行檢測函數

5.MIME類型，IE瀏覽器不支持

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

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

mimeTypes對象的屬性

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

mimeTypes MIME類型返回數組

//mimeTypes MIME類型返回數組
alert(navigator.mimeTypes);
//返回：[object MimeTypeArray]/

遍歷非IE下全部MIME類型信息

//遍歷非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.能力檢測

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

//能力檢測
var width = window.innerWidth;                //返回瀏覽器自己的寬度，返回數字類型

if (typeof width != 'number') {                //若是返回不是數字類型，說明是IE，就使用document
    if (document.compatMode == 'CSS1Compat') {
        width = document.documentElement.clientWidth;
    } else {
        width = document.body.clientWidth;    //非標準模式使用body
    }
}
alert(width);

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

2.怪癖檢測(bug檢測)

與能力檢測相似，怪癖檢測的目標是識別瀏覽器的特殊行爲。但與能力檢測確認瀏覽器支持什麼能力不一樣，怪癖檢測是想要知道瀏覽器存在什麼缺陷(bug)。

bug通常屬於個別瀏覽器獨有，在大多數新版本的瀏覽器被修復。在後續的開發過程當中，若是遇到瀏覽器bug咱們再詳細探討。

var box = {
    toString : function () {}                    //建立一個toString()，和原型中重名了,IE就不打印了
};
for (var o in box) {
    alert(o);                                //IE瀏覽器的一個bug，不識別了
}

3.用戶代理檢測

用戶代理檢測經過檢測用戶代理字符串來肯定實際使用的瀏覽器。在每一次HTTP請求過程當中，用戶代理字符串是做爲響應首部發送的，並且該字符串能夠經過JavaScript的navigator.userAgent屬性訪問。

用戶代理代理檢測，主要經過navigator.userAgent來獲取用戶代理字符串的，經過這組字符串，咱們來獲取當前瀏覽器的版本號、瀏覽器名稱、系統名稱。

PS：在服務器端，經過檢測用戶代理字符串肯定用戶使用的瀏覽器是一種比較廣爲接受的作法。但在客戶端，這種測試被看成是一種萬不得已的作法，且飽受爭議，其優先級排在能力檢測或怪癖檢測以後。飽受爭議的緣由，是由於它具備必定的欺騙性。

userAgent獲取用戶代理字符串，經過這組字符串，咱們來獲取當前瀏覽器的版本號、瀏覽器名稱、系統名稱。

document.write(navigator.userAgent);            //頁面形式輸出獲得用戶代理字符串
//返回：Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0 （火狐瀏覽器）
//Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.2; rv:11.0) like Gecko （IE瀏覽器）

各類瀏覽器返回信息

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

瀏覽器引擎檢測

var client = function () {                        //建立一個自我執行構造函數
    //初始化瀏覽器引擎
    var engine = {                            //建立對象呈現引擎
        ie : false,
        gecko : false,
        webkit : false,
        khtml : false,
        opera : false,

        ver : 0                            //具體的版本號
    };


    //核心引擎檢測程序區
    var ua = navigator.userAgent;  //獲得用戶代理字符串
    alert(ua);
    //檢測opera瀏覽器
    if(window.opera){  //opera瀏覽器支持opera對象，判斷opera對象返回真，說明是opera引擎瀏覽器在訪問
        engine.opera = true; //將瀏覽器引擎opera改成真
        engine.ver = window.opera.version(); //使用opera.version()方法獲取版本號，從新賦值給覽器引擎ver

    //接下來，咱們經過正則表達式來獲取WebKit引擎和它的版本號。谷歌和蘋果瀏覽器
    }else if (/AppleWebKit\/(\S+)/.test(ua)){
        engine.ver = RegExp['$1'];                //獲取WebKit版本號
        engine.webkit = true;                  //將瀏覽器引擎webkit改成真

    //下面，咱們經過正則表達式來獲取Gecko引擎和它的版本號，火狐瀏覽器
    }else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){   //獲取Gecko和它的版本號
        engine.ver = RegExp['$1'];
        engine.gecko = true;               //將瀏覽器引擎gecko改成真

    //最後，咱們經過正則表達式來獲取IE的引擎和它的版本號。由於IE8以前沒有呈現引擎，因此，咱們只有經過"MSIE"這個共有的字符串來獲取。
    }else if(/MSIE ([^;]+)/.test(ua)){
        engine.ver = RegExp['$1']; //獲取IE和它的版本號
        engine.ie = true; //將瀏覽器引擎ie改成真
    }

    return {                           //建立對象
        engine : engine                    //返回呈現引擎對象
    };
}();                                        //自我執行

//判斷打印區
//opera引擎
if(client.engine.opera){ //判斷opera對象返回真，說明是opera瀏覽器在訪問
    alert('目前使用的是opera引擎瀏覽器，版本號爲' + client.engine.ver); //打印出瀏覽器名稱和版本號
}
//引擎webkit,谷歌和蘋果瀏覽器
if(client.engine.webkit){
    alert('目前使用的是WebKit引擎瀏覽器，版本號爲' + client.engine.ver); //打印出瀏覽器名稱和版本號
}

//引擎Gecko，火狐瀏覽器
if(client.engine.gecko){
    alert('目前使用的是WebKit引擎瀏覽器，版本號爲' + client.engine.ver); //打印出瀏覽器名稱和版本號
}

//引擎ie,ie瀏覽器
if(client.engine.ie){
    alert('目前使用的是ie引擎瀏覽器，版本號爲' + client.engine.ver); //打印出瀏覽器名稱和版本號
}

由上面的狀況，咱們須要檢測呈現引擎能夠分爲五大類：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相關的版本，這裏咱們就不去深究了，提供代碼和對應列表。

Windows版本	IE4+	Gecko	Opera < 7	Opera 7+	WebKit
95	"Windows 95"	"Win95"	"Windows 95"	"Windows 95"	n/a
98	"Windows 98"	"Win98"	"Windows 98"	"Windows 98"	n/a
NT4.0	"Windows NT"	"WinNT4.0"	"Windows NT 4.0"	"Windows NT 4.0"	n/a
2000	"Windows NT 5.0"	"Windows NT5.0"	"Windows 2000"	"Windows NT 5.0"	n/a
ME	"Win 9X 4.90"	"Win 9x 4.90"	"Windows ME"	"Win 9X 4.90"	n/a
XP	"Windows NT 5.1"	"Windows NT 5.1"	"Windows XP"	"Windows NT 5.1"	"Windows NT 5.1"
Vista	"Windows NT 6.0"	"Windows NT 6.0"	n/a	"Windows NT 6.0"	"Windows NT 6.0"
7	"Windows NT 6.1"	"Windows NT 6.1"	n/a	"Windows NT 6.1"	"Windows NT 6.1"

瀏覽器檢測完整版

var client = function(){

    //rendering engines
    var engine = {            
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,

        //complete version
        ver: null  
    };
    
    //browsers
    var browser = {
        
        //browsers
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,

        //specific version
        ver: null
    };

    
    //platform/device/OS
    var system = {
        win: false,
        mac: false,
        x11: false,
        
        //mobile devices
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,
        
        //game systems
        wii: false,
        ps: false 
    };    

    //detect rendering engines/browsers
    var ua = navigator.userAgent;    
    if (window.opera){
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)){
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);
        
        //figure out if it's Chrome or Safari
        if (/Chrome\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //approximate version
            var safariVersion = 1;
            if (engine.webkit < 100){
                safariVersion = 1;
            } else if (engine.webkit < 312){
                safariVersion = 1.2;
            } else if (engine.webkit < 412){
                safariVersion = 1.3;
            } else {
                safariVersion = 2;
            }   
            
            browser.safari = browser.ver = safariVersion;        
        }
    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);
        
        //determine if it's Firefox
        if (/Firefox\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)){    
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }
    
    //detect browsers
    browser.ie = engine.ie;
    browser.opera = engine.opera;
    

    //detect platform
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

    //detect windows operating systems
    if (system.win){
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
            if (RegExp["$1"] == "NT"){
                switch(RegExp["$2"]){
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;                
                }                            
            } else if (RegExp["$1"] == "9x"){
                system.win = "ME";
            } else {
                system.win = RegExp["$1"];
            }
        }
    }
    
    //mobile devices
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;
    system.nokiaN = ua.indexOf("NokiaN") > -1;
    
    //windows mobile
    if (system.win == "CE"){
        system.winMobile = system.win;
    } else if (system.win == "Ph"){
        if(/Windows Phone OS (\d+.\d+)/.test(ua)){;
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }
    
    
    //determine iOS version
    if (system.mac && ua.indexOf("Mobile") > -1){
        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2;  //can't really detect - so guess
        }
    }
    
    //determine Android version
    if (/Android (\d+\.\d+)/.test(ua)){
        system.android = parseFloat(RegExp.$1);
    }
    
    //gaming systems
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);
    
    //return it
    return {
        engine:     engine,
        browser:    browser,
        system:     system        
    };

}();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。