JavaScript 客戶端檢測(cè)——“用戶代理檢測(cè)”的注意要點(diǎn)

instein 發(fā)布于2019-08-19 17:10 / 2557人閱讀

摘要：用戶代理檢測(cè)通過(guò)的屬性訪問(wèn)。在服務(wù)器端，通過(guò)檢測(cè)用戶代理字符串來(lái)確定用戶使用的瀏覽器是一種常用的做法但在客戶端，用戶代理檢測(cè)一般為最低優(yōu)先級(jí)。目前只要檢測(cè)五大呈現(xiàn)引擎即可和。

用戶代理檢測(cè)

通過(guò) JavaScript 的 navigator.userAgent 屬性訪問(wèn)。在服務(wù)器端，通過(guò)檢測(cè)用戶代理字符串來(lái)確定用戶使用的瀏覽器是一種常用的做法；但在客戶端，用戶代理檢測(cè)一般為最低優(yōu)先級(jí)。

用戶代理字符串檢測(cè)技術(shù)

首先要確定你需要多么具體的瀏覽器信息。然后在使用代碼進(jìn)行檢測(cè)。

識(shí)別呈現(xiàn)引擎 原理

確切知道瀏覽器的名字和版本號(hào)不如確切知道它實(shí)用的是什么呈現(xiàn)引擎。目前只要檢測(cè)五大呈現(xiàn)引擎即可：IE、Gecko、WebKit、KHTML 和 Opera。（為了不在全局作用域中添加多余的變量，我們將使用模塊增強(qiáng)模式來(lái)封裝檢測(cè)腳本。）基本代碼如下：

var client = function(){

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

做這樣的區(qū)分可以支持像下面這樣編寫(xiě)的代碼：

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

檢測(cè)順序

關(guān)鍵是檢測(cè)順序要正確。由于用戶代理字符串存在很多不一致的地方，如果檢測(cè)順序不對(duì)，很可能導(dǎo)致檢測(cè)結(jié)果不正確。

第一步要識(shí)別 Opera：

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

第二步是 WebKit (檢測(cè)字符串中的“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);
}

正則表達(dá)式

各正則表達(dá)式如下：

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

opera:

不需要正則表達(dá)式，使用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:

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

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

對(duì)于第一種：

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

對(duì)于第二種：

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:

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

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

對(duì)于第一種：

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

對(duì)于第二種：

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

識(shí)別瀏覽器

繼續(xù)完善該代碼：

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
    };
}();

由于大多數(shù)瀏覽器與其呈現(xiàn)引擎密切相關(guān)，所以下面示例中檢測(cè)瀏覽器的代碼與檢測(cè)呈現(xiàn)引擎的代碼是混合在一起的。

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{
        
        //近似的確定版本號(hào)
        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);
}

識(shí)別平臺(tái)

略

識(shí)別Windows操作系統(tǒng)

略

識(shí)別移動(dòng)設(shè)備

略

識(shí)別游戲系統(tǒng)

略

云服務(wù)器 GPU云服務(wù)器云主機(jī)的要點(diǎn) 深度學(xué)習(xí)的要點(diǎn) 檢測(cè)客戶端類型 javascript代碼檢測(cè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78259.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

instein

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

捋一捋Python中的List（下）

閱讀 2109·2021-11-15 11:39
如何下載Tomcat

閱讀 3282·2021-10-09 09:41
Codepen 每日精選（2018-4-1）

閱讀 1561·2019-08-30 14:20
響應(yīng)式布局開(kāi)發(fā)

閱讀 3364·2019-08-30 13:53
【靜態(tài)頁(yè)面架構(gòu)】CSS之表格

閱讀 3378·2019-08-29 16:32
IE8 CSS 樣式兼容性清單

閱讀 3511·2019-08-29 11:20
React 造輪子系列：Icon 組件思路

閱讀 3083·2019-08-26 13:53
堅(jiān)持：學(xué)習(xí)Java后臺(tái)的第一階段，我學(xué)習(xí)了那些知識(shí)

閱讀 833·2019-08-26 12:18

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript 客戶端檢測(cè)——“用戶代理檢測(cè)”的注意要點(diǎn)

相關(guān)文章

**《JavaScript高級(jí)程序設(shè)計(jì)》筆記：客戶端檢測(cè)（九）**

JavaScript 客戶端檢測(cè)（高程三）

《JavaScript高級(jí)程序設(shè)計(jì)》（第3版）讀書(shū)筆記第9章客戶端檢測(cè)