BOM--客户端检测

fen同学
529 阅读3分钟

能力检测：识别浏览器是否支持特定能力

怪癖检测：识别浏览器是不是存在什么缺陷

用户代理检测：通过检测用户代理字符串来确定实际使用的浏览器

1、用户代理字符串

IE4-IE7
Mozilla/4.0 (compatible; MSIE 版本号; 操作系统;)
IE8及以上版本
Mozilla/4.0 (compatible; MSIE 版本号; 操作系统; Trident/Trident 版本号)

//IE9
Mozilla/5.0 (compatible; MSIE 9.0; window NT 6.1; Trident/5.0)

Gecko
Mozilla/Mozilla版本号 (平台；加密类型；操作系统或CUP；语言；预先发行版本) Gecko/Gecko版本号 应用程序或产品/应用程序或产品版本号

//Firefox 2
Mozilla/5.0 (window; U; window NT 5.1; en-US; rv:1.8.1.6) Gecko/20071127 Firefox/2.0.0.11
//Firefox 4
Mozilla/5.0 (window NT 6.1; rv:2.0.1) Gecko/20100101 Firefox 4.0.1

WebKit
Mozilla/5.0 (平台; 加密类型; 操作系统或CUP; 语言;) AppleWebKit/AppleWebKit版本号 (KHTML, like Gecko) Safari/Safari版本号

//safari 3.0
Mozilla/5.0 (Macintosh; U; Mac OS X; en;) AppleWebKit/522.15.5 (KHTML, like Gecko) Version/3.0.3 Safari/522.15.5

//Chrome，WebKit引擎，使用了不同的javascript引擎
Mozilla/5.0 (平台; 加密类型; 操作系统或CUP; 语言;) AppleWebKit/AppleWebKit版本号 (KHTML, like Gecko) Chrome/Chrome版本号 Safari/Safari版本号

Mozilla/5.0 (window; U; Window NT 5.1; en-US;) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.44 Safari/534.7


KHTML
Mozilla/5.0 (compatible; Konqueror/版本号; 操作系统或CUP;) KHTML/KHTML版本号 (like Gecko)

//Konqueror
Mozilla/5.0 (compatible; Konqueror/3.5; SunOS;) KHTML/3.5.0 (like Gecko)

Opera
Opera/版本号 (操作系统或CPU; 加密类型; 语言)
Opera/8.0 (Window NT 5.1; U; en)

Mozilla/4.0 (compatible; MSIE 版本号; 操作系统; 语言) Opera Opera版本号
Mozilla/5.0 (平台；加密类型；操作系统或CUP；语言；预先发行版本) Gecko/Gecko版本号 应用程序或产品/应用程序或产品版本号 Opera Opera版本号

Opera/9.80 (操作系统或CPU; 加密类型; 语言) Preseto/Presto版本号 Version/版本号
Opera/9.80 (Window NT 6.1; U; en) Preseto/2.6.30 Version/10.63

//Persto是Opera的呈现引擎

移动操作系统iOS和Android默认的浏览器都是基于WebKit
Mozilla/5.0 (平台; 加密类型; 操作系统或CUP; 语言;) AppleWebKit/AppleWebKit版本号 (KHTML, like Gecko) Version/浏览器版本号 Mobile/移动版本号 Safari/Safari版本号

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us;) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/A341 Safari/528.16

Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.18 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

2、识别呈现引擎

确切知道浏览器的名称和版本号不如知道它使用的是什么引擎，不同浏览器，使用相同的版本的引擎，他们一定支持相同的特性。

五大引擎：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

因为它的用户代理字符串可能完全模仿其他浏览器。必须检测window.opera对象。Opera及更高版本中都有这个对象

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

第二步：检测呈现引擎WebKit

WebKit的用户代理字符串中包含Gecko和KHTML这两个字符串，所以第二个要检测它。不过WebKit的用户代理字符串中AppleWebkit是独一无二的

var ua = navigator.userAgent;

if(/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExg["$1"];
    engine.webkit = parseFloat(engine.ver);
}
//\S表示非空的特殊字符

第三步：检测KHTML引擎

var ua = navigator.userAgent;

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

第四步：检测Gecko引擎

var ua = navigator.userAgent;

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

第五步：检测IE引擎

var ua = navigator.userAgent;

if(/MSIE ([^;]+)/.test(ua)){
    engine.ver = RegExg["$1"];
    engine.ie = parseFloat(engine.ver);
}

3、识别浏览器

var client = function(){
    var browser = {
        //浏览器
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,
        
        //具体版本号
        ver: null
    }; 
    return {
        browser: browser
    };
}()

var ua = navigator.userAgent;
if(window.opera){
    browser.ver = window.opera.version();
    browser.opera = parseFloat(browser.ver);
}else if(/AppleWebKit\/(\S+)/.test(ua)){
    
    //确定chrome
    if(/Chrome\/(\S+)/.test(ua)){
        browser.ver = RegExg["$1"];
        browser.chrome = parseFloat(browser.ver);
    } else if(/Version\/(\S+)/.test(ua)){
        browser.ver = RegExg["$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)){
    browser.ver = RegExg["$1"];
    browser.konq = parseFloat(browser.ver);
} else if(/rv:([^\)]+)\) Gecko\/d{8}/.test(ua)){
    
    //确定firefox
    if(/Firefox\/(\S+)/.test(ua)){
        browser.ver = RegExg["$1"];
        browser.firefox = parseFloat(browser.ver);
    }
} else if(/MSIE ([^;]+)/.test(ua)){
    browser.ver = RegExg["$1"];
    browser.ie = parseFloat(browser.ver);
}

3、识别平台

var client = function(){
    var system = {
        //平台和设备
        win: false,
        mac: false,
        x11: false,
    }; 
    return {
        system: system
    };
}()

var p = navigator.platform;
system.win = p.includes('Win');
system.mac = p.includes('Mac');
system.x11 = p.includes('X11') || p.includes('Linux');

4、识别Window操作系统

Window 95、98、Me
Window NT Window 2000

Window XP

Window Vista Window 7

if(system.win){
   if(/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
        if(RegExp['$1'] == 'NT'){
            swith(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'];
        }
   } 
}

5、识别移动设备

var client = function(){
    var system = {
        //设备
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        winMobile: false,
    }; 
    return {
        system: system
    };
}()

var ua = navigator.userAgent;
system.iphone = ua.includes('iPhone');
system.ipod = ua.includes('iPod');
system.ipad = ua.includes('iPad');
system.iphone = ua.includes('iphone');

//CPU like Mac OS 
//CPU iPhone OS 3_0 like Mac OS X
//CPU OS 3_2 like Mac OS X
if(system.mac && ua.includes('Mobile')){
    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); 
}

//windows mobile
if(system.win == 'CE'){
    system.winMobile = system.win;
} else if((system.win == 'Ph'){
    if(/Window Phone OS (\d+\.\d+)/.test(ua)){
        system.win = 'Phone';
        system.winMobile = parseFloat(RegExp($1));
    }
}

6、游戏系统

system.wii = ua.includes('Wii');
system.ps = /playstation/i.test(ua);
avatar
文章
阅读
粉丝