JavaScript客户端检测

最新推荐文章于 2022-08-29 10:07:42 发布

mannuandeyangguang

最新推荐文章于 2022-08-29 10:07:42 发布

阅读量341

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/wujunlei1595848/article/details/90726458

版权

前端开发专栏收录该内容

73 篇文章 1 订阅

订阅专栏

应对各个厂商、各个版本的浏览器对特性支持度的差异，常采取的策略

”最小公分母“策略
客户端检测技术，突破和规避种种局限

不到万不得已不要使用客户端检测；先设计最通用的方案，然后使用特定于浏览器的技术增强该方案。

常用的客户端检测技术包括：

能力检测

怪癖检测

用户代理检测

能力检测

最常用最方便，只关注能力，不关注浏览器品牌和版本；
两个原则
先检测达成目的的最常用特性，避免测试多个条件

必须测试实际用到的特性，一个特性存在不一定代表另一个特性也存在
在可能的情况下，尽量使用typeof进行能力检测；
低版本IE下或其他非标准浏览器下，使用typeof检测的值不一定符合标准；
低版本IE的DOM以COM的形式实现，很容易出现typeof检测结果不标准的情况
通过检测对象是否有某些原生属性时，要注意我们的代码是否定义了与要检测到的原生属性同名的属性，确保检测的目标是正确的；

一般通用方法：isHostMethod函数

function isHostMethod(object, property){
    var t = typeof object[property];
    return t == 'function' || (!!(t == 'object' && object[property])) || t == 'unknown';
}

result = isHostMethod(document, 'getElementById');

根据浏览器不同将能力组合起来是更可取的方法；
如果你预先知道自己的程序需要使用某些特定的浏览器特性，那么最好一次性检测所有相关特性。

怪癖检测

目的是识别浏览器的特殊行为，与能级检测的检测能力刚好相反；
怪癖是个别浏览器独有的，通常归类为bug；

实例：IE8及更早版本中，如果某个实例属性与[[Enumerable]]标记为false的某个原型属性同名，那么属性无法被for-in循环遍历

// 怪癖检测
var hasDontEnumQuirk = function(){
    var o = {toString: function(){}};
    for(var prop in o){
        if(prop == 'toString'){
            return false;
        }
    }

    return true;
}();

hasDontEnumQuirk;
// false 说明浏览器没有这个怪癖

用户代理检测

通过检测用户代理字符串来确定实际使用的浏览器；
通常是在最后才选择这样的方法，或者想实现某些特定的功能才使用用户代理检测；
主要使用navigator.useragent 、navigator.platform和一些浏览器的特征对象来检测；
检测主要内容是：呈现引擎信息（engine)、浏览器信息、平台、设备、操作系统；
各个浏览器的用户代理字符串因为历史的原因十分复杂与怪异，具体见P222;

代码：

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

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

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

    // 检测呈现引擎和浏览器
    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 还是 Edge
        if (/Edge\/(\S+)/.test(ua)) {
            engine.ver = browser.ver = 'Edge';
            engine.ie = browser.ie = 'Edge';
        } else 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\/(\S+)/.test(ua)) {
        engine.ver = browser.ver = RegExp['$1'];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:(\S+)+\) 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(engine.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp['$1'];
        engine.ie = browser.ie = parseFloat(engine.ver);
    } else if (/rv:(\S+)+\) like Gecko/) {
        engine.ver = browser.ver = RegExp['$1'];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }

    // 检测浏览器
    browser.ie = engine.ie;
    browser.opera = engine.opera;

    // 检测平台
    var p = navigator.platform;
    system.win = p.indexOf('Win') == 0;
    system.mac = p.indexOf('Mac') == 0;
    system.x11 = (p == 'X11') || (p.indexOf('Linux') == 0);

    // 检测 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;
                    case '6.2':
                        system.win = '8';
                        break;
                    case '10.0':
                        system.win = '10'
                        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.ipad = ua.indexOf('iPad') > -1;
    system.ipod = ua.indexOf('iPod') > -1;
    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']);
        }
    }

    // 检测 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; // 猜测检测
        }
    }

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

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

    // 返回这些对象
    return {
        engine: engine,
        browser: browser,
        system: system
    };
}();

mannuandeyangguang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript客户端检测

应对各个厂商、各个版本的浏览器对特性支持度的差异，常采取的策略”最小公分母“策略客户端检测技术，突破和规避种种局限不到万不得已不要使用客户端检测；先设计最通用的方案，然后使用特定于浏览器的技术增强该方案。常用的客户端检测技术包括：目录能力检测怪癖检测用户代理检测能力检测最常用最方便，只关注能力，不关注浏览器品牌和版本；两个原则先检测达成目的的最常用特性...
复制链接

扫一扫