乘风原创程序

  • JavaScript客户端检测
  • 2020/8/10 10:32:05
  • JavaScript客户端检测

    能力检测

      能力检测是最常见的客户端检测方式,主要是识别浏览器的能力,但不能确定浏览器:

    1. 基本模式:
    if(Object.propertyInQuestion){
    	//使用propertyInQuestion
    }
    
    1. 两个重要概念:
        先检测达成目标的最常用的,后检测其他的;
        必须测试的是实际要用的特性;
    2. 尽量使用typeof来完成能力检测,但是较低版本的typeof有些时候无法保证结果正确;
    3. 可以使用isHostMethod()函数来实现,此函数考虑到了浏览器的异常行为
    function isHostMethod(object, property){
        var t = typeof object[property];
        return t == 'function' || (!!(t == 'object' && object[property])) || t == 'unknown';
    }
    result = isHostMethod(document, 'getElementById');
    

    怪癖检测

    怪癖检测和能力检测比较相似,不过怪癖检测是检测浏览器的特殊行为

    1. 怪癖检测是检测浏览器存在的bug,这类bug是指浏览器独有而且在新版本中可能不会修复的问题;
    2. 一般只检测对自己有直接影响的代码

    用户代理检测

      通过检测用户代理字符串来确定实际使用的浏览器;
      一般使用navigator.useragent 、navigator.platform和一些浏览器的特征对象来;
      检测主要内容是:呈现引擎、浏览器信息、平台、设备等。

    1. 识别呈现引擎
        由于有些浏览器的呈现引擎的用户代理字符串相似,为了保证检测呈现引擎的正确需要正确的检测顺序,
        例如检测IE、Gecko、WebKit、KHTML、Opera,Opera代理字符不会标识为Opera,所以要先通过window.opera检测Opera,以此类推。

    2. 识别浏览器
        有些浏览器使用完全相同的呈现引擎,所以为了正确识别,还需要识别浏览器。

    3. 识别平台系统和设备
        不同的浏览器在不同平台、系统、设备下的问题不同,因此需要申明。
      综上代码:

    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
        };
    }();
    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){
            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 = 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)){
            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);
        }
        //检测浏览器
        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;
                        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;
        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; //不能真正检测出来,所以只能猜测
            }
        }
        //检测 Android 版本
        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
        };
    }();
    

    本文地址:https://blog.csdn.net/qq_40552867/article/details/107893756