浏览器识别、客户端检测

62 阅读 0 评论 41 点赞

我是靠谱客的博主内向帆布鞋，最近开发中收集的这篇文章主要介绍浏览器识别、客户端检测，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

五大呈现引擎:

trident(ie) , gecko(firefox,Camino,Netscape) , webkit(chrome,safari), KHTML,Opera

客户端检测技术（按应该使用的优先级）：

能力检测：特性检测，不是识别浏览器，而是识别浏览器的能力,先检查常用的特性，检查实际要用到的特性。

　形式为：if(object.propertyInQuestion){}

//是否支持netscape风格的插件
var hasNSPlugins = !!(navigator.plugins&&navigator.plugins.length);
//是否具有DOM1级规定的能力
var hasDOM1 = !!(document.getElementById&&document.getElementsByName&&document.getElementsByTagName);

怪癖检测 : 识别浏览器有什么特殊行为，bug

　ie中的一个bug,当实例中有个属性与标记为[dontEnum]的某个原型属性同名，便不会出现在 for-in循环

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

Safari3中的bug,被隐藏的属性会枚举出来

var has EnumShadowsQuirk = function(){
  var o={toString:function(){}};
  var count=0;
  for(var prop in o){
    if(prop=="toString")count++;
  }  
}

用户代理检测，检测用户使用的浏览器，navigator.userAgent用户代理字符串，navigator.platform 平台信息
1. 检测呈现引擎，先检测opera window.opera；检测webkit、khtml、gecko、ie
2. 检测浏览器，在呈现引擎的基础上分析

var client = function(){
    var engine={
        ie:0,
        gecko:0,
        webkit:0,
        opera:0,
        khtml:0,
        ver:null
    };
    
    var browser={
        ie:0,
        firefox:0,
        chrome:0,
        safari:0,
        opera:0,
        konq:0,
        ver:null
    }
    var system={
        win:false,
        mac:false,
        x11:false,
        //移动设备
        iphone:false,
        ipod:false,
        nokiaN:false,
        minMobile:false,
        macMobile:false
        //游戏系统
        wii:false,
        ps:false
    }
    
    //检测呈现引擎及浏览器
    var ua=navigator.userAgent;
    if(window.opera){
        engine.ver=browser.ver=window.opera.version();
        engine.opera=browser.oper=parseFloat(engine.ver);
    }else if(/AppleWebkit/(S+)/.test(ua)){
        engine.ver=RegExp["$1"];
        engine.webkit=parseFloat(engine.ver);
        //确定是safari还是chrome
        if(/chrome/(S+)/.test(ua)){
            broswer.ver=RegExp["$1"];
            broswer.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)safariVerison=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=broswer.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);
    }
    //检测平台
    var p=navigator.plateform;    
    system.win=p.indexOf("Win")==0;
    system.mac=p.indexOf("Mac")==0;
    system.x11=(p=="X11")||(p.indexOf("Linux")==0);
    //检测操作系统
    if(system.win){
        //......
    }
    //移动设备
    system.iphone=p.indexOf("iPhone")>-1;
    system.ipod=p.indexOf("iPod")>-1;
    system.nokiaN=p.indexOf("NokiaN")>-1;
    system.winMobile=(system.win=="CE");
    system.macMobile=(system.iphone||system.ipod);
    
    //游戏系统
    system.wii=ua.indexOf("Wii")>-1;
    system.ps=/playstation/i.test(ua);
    return{
        engine:engine,
        browser:browser,
        system:system
    }
    
    }                
    }

Doctype	NS6	Old Moz	Moz & Safari & Opera 10 & IE10 & HTML5	Opera 9.0	IE 8, IE 9 & Opera 9.5	IE 7 & Opera 7.10	IE 6 & Opera 7.0	Mac IE 5	Konq 3.2
None	Q	Q	Q	Q	Q	Q	Q	Q	Q
`<!DOCTYPE html>`	Q	S	S	S	S	A	A	A
`<!DOCTYPE html SYSTEM "about:legacy-compat">`	?	?	?	?	?	?	?	?
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">`	Q	Q	Q	Q	Q	Q	Q	Q	Q
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">`	S	S	S	S	S	A	A	A	A
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">`	S	S	S	S	S	A	A	Q	A
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">`	S	S	S	S	S	A	A	A	A
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`	S	S	S	S	S	A	A	A	A
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">`	Q	Q	Q	Q	Q	Q	Q	Q	Q
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">`	Q	Q	Q	Q	Q	Q	Q	Q	Q
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`	S	S	A	A	A	A	A	A	Q
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">`	Q	S	A	A	A	A	A	A	Q
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`	Q	Q	Q	Q	A	A	A	A	Q
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`	S	S	S	S	S	A	A	A	A
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">`	S	S	S	S	S	A	A	A	A
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`	S	S	S	S	S	A	A	A	A
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`	S	S	A	A	A	A	A	A	Q
`<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`	S	S	S	S	S	A	Q	A	Q
`<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">`	S	S	S	S	S	A	Q	A	Q
`<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`	S	S	S	S	S	A	Q	A	Q
`<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`	S	S	A	A	A	A	Q	A	Q
`<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">`	Q	S	S	Q	Q	Q	Q	Q	Q
`<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN">`	Q	S	S	S	S	A	A	A	Q
`<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN">`	S	S	S	Q	Q	Q	Q	Q	Q
`<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN">`	S	S	S	S	S	A	A	A	Q