JavaScript客户端检测——用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中,用户代理字符串是作为相应首部发送的,而且该字符串可以通过JavaScript的navigator.userAgent属性访问。在服务器端,通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。在客户端,优先级在能力检测和怪癖检测之后。
1.识别呈现引擎
检测五大呈现引擎: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
            };
        }();

要正确的识别呈现引擎,关键是检测顺序要正确。第一步是识别Opera,要识别Opera,必须得检测window.opera,调用version()方法可以返回一个表示浏览器版本的字符串。

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

放在第二位检测的呈现引擎是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);
        }

接下来测试呈现引擎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);
        }

最后检测呈现引擎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 = {
                //呈现引擎
                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,
                browser: browser
            };
        }();
        //检测呈现引擎及浏览器
        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 = {
                //呈现引擎
                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
            };
            //在此检测呈现引擎、平台和设备
            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操作系统

        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.识别移动设备

        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
            };
            var system = {
                win:false,
                max:false,
                xll:false,
                //移动设备
                iphone:false,
                ipod:false,
                ipad:false,
                ios:false,
                android:false,
                nokiaN:false,
                winMobile:false
            };
            //移动设备
            
            //在此检测呈现引擎、平台和设备
            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.识别游戏系统

        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
            };
            var system = {
                win:false,
                max:false,
                xll:false,
                //移动设备
                iphone:false,
                ipod:false,
                ipad:false,
                ios:false,
                android:false,
                nokiaN:false,
                winMobile:false,
                //游戏系统
                wii:false,
                ps:false
            };
            
            //在此检测呈现引擎、平台和设备
            return {
                engine:engine,
                browser: browser,
                system: system
            };
        }();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容