红皮书(8):客户端检测

才能检测

在编写代码之前先检测特定浏览器的才能。比方,剧本在挪用某个函数之前,能够要先检测该函数首付存在。这类检测要领将开发人员从斟酌细致的浏览器范例和版本中解放出来,让他们把注意力集合到相应的才能是不是存在上。才能检测没法精确地检测特定的浏览器和版本。

怪癖检测

怪癖实际上是浏览器完成中存在的bug,比方初期的webkit中就存在一个怪癖,即它会再for-in循环中返回被隐蔽的属性。怪癖检测平常涉及到运转一段代码,然后肯定浏览器是不是存在某个怪癖。因为怪癖检测没法精确地检测特定的浏览器和版本。

用户代办检测

经由过程检测用户代办字符串来辨认浏览器。用户代办字符串中包含大批与浏览器有关的信息,包含浏览器、平台、操作体系及浏览器版本。用户代办字符串有过一段相称长的生长汗青,在此期间,浏览器提供商视图经由过程在用户代办字符串总增加一些诳骗性信息,诳骗网站细致本身的浏览器是别的一种浏览器。用户代办检测须要特别的技能,特别是要注意Opera会遮盖其用户代办字符串的状况。即便如此,经由过程用户代办字符串依然能够检测出浏览器所用的显现引擎以及地点的平台,包含挪动装备和游戏体系。

在每一次HTTP要求过程当中,用户代办字符串是作为相应首部发送的,而且该字符串能够经由过程Javascript的navigator.userAgent属性接见。在服务器端,经由过程检测用户代办字符串来肯定用户运用的浏览器是一种经常使用而且广为接收的做法。而在客户端,用户代办检测平常被看成一种万不得已的做法,其优先级排在才能检测和怪癖检测以后。

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 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(engine.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.kong = 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;

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

console.log(client.engine);
console.log(client.browser);

Tangram 检测浏览器源码

/**
 * 声明baidu包
 */
var baidu = baidu || {version: "1-3-2"}; // meizz 20100513 将 guid 升级成 \x06
baidu.guid = "$BAIDU$";//提出guid,防备修正window[undefined] 20100504 berg

/**
 * meizz 2010/02/04
 * 顶级域名 baidu 有能够被闭包挟制,而须要页面级唯一信息时须要用到下面这个对象
 */

window[baidu.guid] = window[baidu.guid] || {};

/**
 * 声明baidu.browser包
 */
baidu.browser = baidu.browser || {};

/**
 * 推断是不是为isGecko
 */
baidu.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent);

/**
 * 推断是不是为isWebkit
 */
baidu.browser.isWebkit = /webkit/i.test(navigator.userAgent);

/**
 * 推断是不是为规范形式
 */
baidu.browser.isStrict = document.compatMode == "CSS1Compat";

/**
 * 推断是不是为safari浏览器
 */
if ((/(\d+\.\d)(\.\d)?\s+safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent))) {
    baidu.browser.safari = parseFloat(RegExp['\x241']);
}

/**
 * 推断是不是为opera浏览器
 */
if (/opera\/(\d+\.\d)/i.test(navigator.userAgent)) {
    baidu.browser.opera = parseFloat(RegExp['\x241']);
}

/**
 * 推断是不是为chrome浏览器
 */
if (/chrome\/(\d+\.\d)/i.test(navigator.userAgent)) {
    baidu.browser.chrome = parseFloat(RegExp['\x241']);
}

/**
 * 推断是不是为ie浏览器
 */
if (/msie (\d+\.\d)/i.test(navigator.userAgent)) {
    baidu.ie = baidu.browser.ie = document.documentMode || parseFloat(RegExp['\x241']);
}

/**
 * 推断是不是为firefox浏览器
 */
if (/firefox\/(\d+\.\d)/i.test(navigator.userAgent)) {
    baidu.browser.firefox = parseFloat(RegExp['\x241']);
    // '\x241' 是八进制示意法 '\x24' 对应字符 '$' ,所以 '\x241'  等同于 '$1'
}
    原文作者:小渝人儿
    原文地址: https://segmentfault.com/a/1190000000382160
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞