客户端检测之用户代理检测

乐辞

于 2021-11-06 20:09:53 发布

阅读量565

点赞数 2

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_45503196/article/details/121183650

版权

用户代理检测指的是，通过检测用户代理字符串来确定实际使用的浏览器，其中可以通过JavaScript的navigator.userAgent属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端，用户代理检测一般被当做一种万不得已才用的做法，它的优先级一般排在能力检测和怪癖检测之后

说到能力检测和怪癖检测，那我们先来聊聊它们是什么

能力检测：在编写代码之前先检测待定浏览器的能力。例如，脚本在调用某个函数前，可能要先检测这个函数是否存在。这种检测让开发人员从考虑具体的浏览器和版本中解放出来，让他们把注意力集中到相应的能力是否存在上。但是能力检测无法精确的检测待定浏览器和版本。

function getElement(id) {
    if (document.getElementById) {
        return document.getElementById(id);
    } else if (document.all) {
        return document.all[id];
    } else {
        throw new Error("No way to retrieve element!");
    }
}

怪癖检测：怪癖检测就是想要知道浏览器存在什么缺陷（bug）。怪癖检测的目标是识别浏览器的特殊行为。通常要尝试运行一段代码，以确定某一特性能不能正常工作。例如：在IE8及更早版本中存在一个 bug，即如果某个实例属性与[[Enumerable]]标记为 false 的某个原型属性同名，那么该实例属性将不会出现在 for-in 循环当中。

var hasDontEnumQuirk = function(){
    var o = { toString : function(){} };
    for (var prop in o){
        if (prop == "toString"){
            return false;
        }
    }
    return true;
}()

以上代码通过一个匿名函数来测试这个怪癖，函数中创建了一个带有toString()方法的对象，如果在正确的ECMAScript实现中，那么该属性则会出现在for in循环中。

知道了能力检测和怪癖检测的基本概念以后，我们再来看看用户代理检测是如何实现的？

1 用户代理字符串检测技术

一般情况下，直到呈现引擎和最低限度的版本就可以决定是否可以使用某些操作方法了

if(isEs6 || isEs7){ // 不推荐这种写法
    // code...
}

上面这种代码其实很脆弱，因为它要依据特定的版本来决定做什么，如果是IE8或者新版本出来了，就必须更新这些代码，于是比较推荐下面写法

if(isVerson >= 6){
    // code...
}

1.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”是独一无二的，因此检测这个字符串最合适。

else if(/AppleWebKit\/(\S+)/.test(us)){
    engine.ver = RegExp["$1"];
    engine.webkit=parseFloat(engine.ver);
}

接下来测试呈现引擎KHTML。

else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {//khtml 引擎
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}

排除了 Webkit 和 KHTML 之后，就可以准确地检测出 Gecko，它的版本号出现在字符串“rv:”的后面：

else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {//gecko 引擎
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}

最后是检测 IE：

else if (/MSIE ([^;]+)/.test(ua)) {//ie 引擎 
    // 这里正则表达式中的取反符号，是为了取得不是分号的所有字符
    engine.ver = RegExp["$1"];
    engine.ie = parseFloat(engine.ver);
}

1.2 识别浏览器

为 client 对象添加了新属性：

var client = function () {
...
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) {//opera 引擎
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)) {//webkit 引擎
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);

    //先区分 Chrome 与 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 {
        //近似地确定版本号
        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)) {//khtml 引擎
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);

} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {//gecko 引擎
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);

    if (/Firefox\/(\S+)/.test(ua)) {//是 Firefox
        browser.ver = RegExp["$1"];
        browser.firefox = parseFloat(browser.ver);
    }
} else if (/MSIE ([^;]+)/.test(ua)) {//ie 引擎
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
}

可以这样使用上面设计的代码：

if (client.engine.webkit){//WebKit 引擎
    if (client.browser.chrome){
        //Chrome
    } else if (client.browser.safari){
        //Safari
    }
} else if (client.engine.gecko){
    if (client.browser.firefox){
        //Firefox
    }else {
        //其他以 gecko 为呈现引擎的浏览器
    }
}

1.3 识别平台

为 client 对象添加了新属性：

var client = function () {
...
    //平台
    var system = {
        win: false,
        mac: false,
        x11: false,

    };
...
    return {
        engine: engine,
        browser:browser,
        system: system
    };
}

这样检测平台：

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

1.4 识别windows 操作系统

由于不同的浏览器在不同的 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.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"];
    }
}

这样使用：

if (client.system.win){
    if (client.system.win == "XP"){
        //XP
    }else if (client.system.win == "7"){
        //win7
    }
}

1.5 识别移动设备

为 system 对象添加新属性：

var client = function () {
...
    //平台
    var system = {
        ...

        //移动设备
        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版本：

//检测 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 版本：

//检测 Android 版本
if (/Android (\d+\.\d+)/.test(ua)) {
    system.android = parseFloat(RegExp.$1);
}

检测诺基亚 N 系列手机：

//检测诺基亚 N 系列手机
system.nokiaN = ua.indexOf("NokiaN") > -1;

然后这样使用：

if (client.engine.webkit){
    if (client.system, iOS){
        //iOS
    }else if (client.system.android){
        //Android
    }
}

最后是 Windows Mobile（Windows CE）：

if (system.win == "CE") {//Windows Mobile 5.0 以及之前版本
    system.winMobile = system.win;
} else if (system.win == "Ph") {//Windows Mobile 5.0 以后版本
    if (/Windows Phone OS (\d+.\d+)/.test(ua)) {
        system.win = "Phone";
        system.winMobile = parseFloat(RegExp["$1"]);
    }
}

1.6 识别游戏系统

为 system 对象添加新属性：

var client = function () {
...
    //平台
    var system = {
        ...

        //游戏系统
        wii: false,
        ps: false
    };
...
    return {
        engine: engine,
        browser:browser,
        system: system
    };
}

这样检测：

//识别游戏系统
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);

完整代码

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,
        mac: false,
        x11: false,

        //移动设备
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,

        //游戏系统
        wii: false,
        ps: false
    };

    //检测呈现引擎、平台和设备
    var ua = navigator.userAgent;//用户代理字符串
    if (window.opera) {//opera 引擎
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)) {//webkit 引擎
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);

        //先区分 Chrome 与 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 {
            //近似地确定版本号
            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)) {//khtml 引擎
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);

    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {//gecko 引擎
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);

        if (/Firefox\/(\S+)/.test(ua)) {//是 Firefox
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {//ie 引擎
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }

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

    //识别 Windows 操作系统
    console.log("ua:" + ua);
    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"];
        }
    }

    //识别移动设备
    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);
    }

    //检测诺基亚 N 系列手机
    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"]);
        }
    }

    //识别游戏系统
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);

    return {
        engine: engine,
        browser: browser,
        system: system
    };
}();

总结

应该优先使用能力检测和怪癖检测，用户代理检测方法尽量只用作最后检测的手段。它一般适用于以下情形：

不能直接准确地使用能力检测和怪癖检测。
同一种浏览器在不同平台下具有不同的能力。
为了跟踪分析等目的需要知道确切的浏览器类型。

乐辞

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
客户端检测之用户代理检测

用户代理检测指的是，通过检测用户代理字符串来确定实际使用的浏览器，其中可以通过JavaScript的navigator.userAgent属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端，用户代理检测一般被当做一种万不得已才用的做法，它的优先级一般排在能力检测和怪癖检测之后说到能力检测和怪癖检测，那我们先来聊聊它们是什么能力检测：在编写代码之前先检测待定浏览器的能力。例如，脚本在调用某个函数前，可能要先检测这个函数是否存在。这种检测让开发人员
复制链接

扫一扫