JavaScript 客戶端檢測——「用戶代理檢測」的注意要點

用戶代理檢測

經過 JavaScript 的 navigator.userAgent 屬性訪問。在服務器端，經過檢測用戶代理字符串來肯定用戶使用的瀏覽器是一種經常使用的作法；但在客戶端，用戶代理檢測通常爲最低優先級。

用戶代理字符串檢測技術

首先要肯定你須要多麼具體的瀏覽器信息。而後在使用代碼進行檢測。

識別呈現引擎

原理

確切知道瀏覽器的名字和版本號不如確切知道它實用的是什麼呈現引擎。目前只要檢測五大呈現引擎便可：IE、Gecko、WebKit、KHTML 和 Opera。（爲了避免在全局做用域中添加多餘的變量，咱們將使用模塊加強模式來封裝檢測腳本。）基本代碼以下：

var client = function(){

    var engine = {
        
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,
        
        ver: null //完整的版本
    };
    
    return {
        engine: engine
    };
}();

作這樣的區分能夠支持像下面這樣編寫的代碼：

if(client.engine.ie){
    //針對 IE 的代碼
}else if (client.engine.gecko > 0){
    if (client.engine.ver == "1.8.1"){
        //針對這個版本執行某些操做
    }
}

檢測順序

關鍵是檢測順序要正確。因爲用戶代理字符串存在不少不一致的地方，若是檢測順序不對，極可能致使檢測結果不正確。

第一步要識別 Opera：

if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}

第二步是 WebKit (檢測字符串中的「AppleWebKit」)：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}

第三步是 KHTML：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}

第四步是 Gecko：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}

第五步是 IE：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}else if (/MSIE ([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.ie = parseFloat(engine.ver);
}

正則表達式

各正則表達式以下：

(useragentstring.com這裏列出了各類瀏覽器的版本以及用戶代理字符串。)

opera:

不須要正則表達式，使用window.opera.verson()；

Webkit:

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36

AppleWebKit\/(\S+) //AppleWebKit/537.36

KHTML:

1. Mozilla/5.0 (X11; Linux) KHTML/4.9.1 (like Gecko) Konqueror/4.9

2. Mozilla/5.0 (compatible; Konqueror/4.5; FreeBSD) KHTML/4.5.4 (like Gecko)

對於第一種：

KHTML\/(\S+) //KHTML/4.9.1
Konqueror\/(\S+) //Konqueror/4.9

對於第二種：

KHTML\/(\S+) //KHTML/4.5.4
Konqueror\/([^;]+) //Konqueror/4.5

Gecko:

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1

rv:([^\)]+)\) Gecko\/\d{8} //rv:40.0) Gecko/20100101

IE:

1. Mozilla/5.0 (compatible, MSIE 11, Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

2. Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0

對於第一種：

MSIE ([^,]+) //MSIE 11

對於第二種：

MSIE ([^;]+) //MSIE 10.6

識別瀏覽器

繼續完善該代碼：

var client = function(){

    var engine = {
        
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,
        
        ver: null //完整的版本
    };
    
    var browser = {
    
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,
        
        ver: null
    
    };
    
    return {
        engine: engine
    };
}();

因爲大多數瀏覽器與其呈現引擎密切相關，因此下面示例中檢測瀏覽器的代碼與檢測呈現引擎的代碼是混合在一塊兒的。

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);
    
    //肯定是Chrome仍是Safari
    if (/Chrome\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.chrome = parseInt(browser.ver);
    }else if(/Version\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.safari = parseInt(browser.ver);
    }else{
        
        //近似的肯定版本號
        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);
    
    //肯定不是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);
}

識別平臺

略

識別Windows操做系統

略

識別移動設備

略

識別遊戲系統

略