JavaScript客戶端檢測——用戶代理檢測

用戶代理檢測通過檢測用戶代理字符串來確定實際使用的瀏覽器。在每一次HTTP請求過程中肋层,用戶代理字符串是作為相應(yīng)首部發(fā)送的亿笤,而且該字符串可以通過JavaScript的navigator.userAgent屬性訪問。在服務(wù)器端栋猖,通過檢測用戶代理字符串來確定用戶使用的瀏覽器是一種常用而且廣為接受的做法净薛。在客戶端,優(yōu)先級在能力檢測和怪癖檢測之后蒲拉。
1.識別呈現(xiàn)引擎
檢測五大呈現(xiàn)引擎:IE肃拜、Gecko、WebKit雌团、KHTML和Opera燃领。
為了不再全局作用域中添加多余的變量,使用模塊增強模式來封裝檢測腳本锦援。

        var client = function () {
            var engine = {
                //呈現(xiàn)引擎
                ie:0,
                gecko:0,
                webkit:0,
                khtml:0,
                opera:0,
                //具體版本號
                ver:null
            };
            //在此檢測呈現(xiàn)引擎猛蔽、平臺和設(shè)備
            return {
                engine:engine
            };
        }();

要正確的識別呈現(xiàn)引擎,關(guān)鍵是檢測順序要正確灵寺。第一步是識別Opera曼库,要識別Opera,必須得檢測window.opera替久,調(diào)用version()方法可以返回一個表示瀏覽器版本的字符串凉泄。

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

放在第二位檢測的呈現(xiàn)引擎是Webkit,WebKit用戶代理字符串中的“AppleWebKit”是獨一無二的蚯根,因此檢測這個字符串最合適后众。

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

接下來測試呈現(xiàn)引擎KHTML胀糜。

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

最后檢測呈現(xiàn)引擎IE蒂誉。

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

2.識別瀏覽器


        var client = function () {
            var engine = {
                //呈現(xiàn)引擎
                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
            };
            //在此檢測呈現(xiàn)引擎教藻、平臺和設(shè)備
            return {
                engine:engine,
                browser: browser
            };
        }();
        //檢測呈現(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(us)){
            engine.ver = RegExp["$1"];
            engine.webkit=parseFloat(engine.ver);
            //確定是Chrome還是Safari
            if (/Chrome\/(\S+)/.test(us)) {
                browser.ver = RegExp["$1"];
                browser.chrome = parseFloat(browser.ver);
            }else if(/Version\/(\S+)/.test(us)){
                browser.ver = RegExp["$1"];
                browser.safari = parseFloat(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(us)||/Konqueror\/([^;]+)/.test(us)) {
            engine.ver = browser.ver = RegExp["$1"];
            engine.khtml= browser.konq=parseFloat(engine.ver);
        }else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(us)){
            engine.ver = RegExp["$1"];
            engine.gecko=parseFloat(engine.ver);
            //確定是不是Firefox
            if(/Firefox\/(/S+).test(us)){
                browser.ver = RegExp["$1"];
                browser.firefox = parseFloat(browser.ver);
            }
        }else if(/MSIE ([^;]+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.ie=parseFloat(engine.ver);
        }
        if (client.engine.webkit) {
            if(client.browser.chrome){

            }else if(client.browser.safari){

            }
        }else if(client.engine.gecko){
            if(client.browser.firefox){

            }else{
                
            }
        }

3.識別平臺
目前三大主流平臺Windows右锨、Mac和Unix(包括各自Linux)括堤。

        var client = function () {
            var engine = {
                //呈現(xiàn)引擎
                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
            };
            var system = {
                win:false,
                max:false,
                xll:false
            };
            //在此檢測呈現(xiàn)引擎、平臺和設(shè)備
            return {
                engine:engine,
                browser: browser,
                system: system
            };
        }();

在確定平臺時绍移,檢測navigator.platform要比檢測用戶代理字符串更簡單悄窃。

        var p = navigator.platform;
        system.win = p.indeOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.xll - (p.indexOf("Xll") == 0) || (p.indeOf("Linux") == 0);

4.識別windows操作系統(tǒng)

        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.wub = "XP";
                            break;
                        case "6.0":
                        system.wub = "Vista";
                        break;
                        case "6.1":
                        system.wub = "7";
                        break;
                        default :
                        system.wub = "NT";
                        break;
                    }
                }else if(RegExp["$1"] == "9x"){
                    system.win = "ME";
                }else{
                    system.win = RegExp["$1"];
                }
            }
        }
        if (client.system.win) {
            if(client.system.win == "XP"){

            }else if(client.system.win == "Vista"){
                
            }
        }

5.識別移動設(shè)備

        var client = function () {
            var engine = {
                //呈現(xiàn)引擎
                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
            };
            var system = {
                win:false,
                max:false,
                xll:false,
                //移動設(shè)備
                iphone:false,
                ipod:false,
                ipad:false,
                ios:false,
                android:false,
                nokiaN:false,
                winMobile:false
            };
            //移動設(shè)備
            
            //在此檢測呈現(xiàn)引擎、平臺和設(shè)備
            return {
                engine:engine,
                browser: browser,
                system: system
            };
        }();
        system.iphone = ua.indexOf("iPhone") > -1;
        system.ipod = ua.indexOf("iPod") > -1;
        system.ipad = ua.indexOf("iPad") > -1;
        //檢測iOS版本
        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;//不能真正檢測出來蹂窖,只能猜測
            }
        }
        //檢測Android版本
        if(/Android (\d+\.\d+)/.test(ua)){
                system.android = parseFloat(RegExp.$1);
            }
//檢測Nokia
      
                system.nokiaN= ua.indexOf("NokiaN")>-1;
            

6.識別游戲系統(tǒng)

        var client = function () {
            var engine = {
                //呈現(xiàn)引擎
                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
            };
            var system = {
                win:false,
                max:false,
                xll:false,
                //移動設(shè)備
                iphone:false,
                ipod:false,
                ipad:false,
                ios:false,
                android:false,
                nokiaN:false,
                winMobile:false,
                //游戲系統(tǒng)
                wii:false,
                ps:false
            };
            
            //在此檢測呈現(xiàn)引擎轧抗、平臺和設(shè)備
            return {
                engine:engine,
                browser: browser,
                system: system
            };
        }();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市瞬测,隨后出現(xiàn)的幾起案子横媚,更是在濱河造成了極大的恐慌,老刑警劉巖月趟,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件灯蝴,死亡現(xiàn)場離奇詭異,居然都是意外死亡孝宗,警方通過查閱死者的電腦和手機穷躁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來因妇,“玉大人折砸,你說我怎么就攤上這事∩尘” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵两芳,是天一觀的道長摔寨。 經(jīng)常有香客問我,道長怖辆,這世上最難降的妖魔是什么是复? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮竖螃,結(jié)果婚禮上淑廊,老公的妹妹穿的比我還像新娘。我一直安慰自己特咆,他們只是感情好季惩,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般画拾。 火紅的嫁衣襯著肌膚如雪啥繁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天青抛,我揣著相機與錄音旗闽,去河邊找鬼。 笑死蜜另,一個胖子當著我的面吹牛适室,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播举瑰,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼捣辆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了嘶居?” 一聲冷哼從身側(cè)響起罪帖,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎邮屁,沒想到半個月后整袁,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡佑吝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年坐昙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芋忿。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡炸客,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出戈钢,到底是詐尸還是另有隱情痹仙,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布殉了,位于F島的核電站开仰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏薪铜。R本人自食惡果不足惜众弓,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望隔箍。 院中可真熱鬧谓娃,春花似錦、人聲如沸蜒滩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至弦悉,卻和暖如春窒典,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背稽莉。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工瀑志, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人污秆。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓劈猪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親良拼。 傳聞我的和親對象是個殘疾皇子战得,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容