JS 客户端检测

客户端检测是JavaScript开发中最受争议的一个话题，由于浏览器之间存在差别，通常需要根据不同的浏览器的能力分别编写不同的代码。有不少客户端检测方法，但下列是经常使用的。

　　1.能力检测：编写代码之前先检测特定浏览器的能力。例如，脚本在调用某个函数之前，可能要检测该函数是否存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让他们先把注意力集中到相应的能力是否存在上。能力检测无法精准的检测特定的浏览器和版本

         （1）能力检测基本模式：

          

   if( object.propertyInQuestion){
       //使用 object.propertyInQuestion
   }

       

          （2）能力检测不是浏览器检测：

      

//确定浏览器是否支持 Netscape 风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length );

//确定浏览器是否具有 DOM1 级规定的能力
var hasDOM1 = !!(document.getElementById && document.createElement && document.getElementByTagName);

　　2.怪癖检测：怪癖实际上是浏览器实现中的bug，例如早期的webkit中就存在一个怪癖，即它会在for-in循环中返回被隐藏的属性，怪癖检测通常涉及到运行一小段代码，然后确定浏览器是否存在某个怪癖，由于怪癖检测与能力检测先比效率比更低，因此一个只在某个怪癖会干扰脚本运行的情况下使用。怪癖检测无法精准的检测特定的浏览器和版本。

         （1）IE中存在的一个 bug ，即如果某个实例属性与标记为 [[DontEnum]] 的某个原型属性同名，那么该实例属性将不会出现在 fon-in 循环当中。

         

  var hasDontEnumQuirk = function(){
       var o = { toString : function(){}};

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

       （2）safari 3.0 以前版本会枚举被隐藏的属性的属性

         

var hasEnumShadownsQuirk = function(){
    var o = { toString : functionn(){} };
    var count = 0;
    for( var prop in o){
        if( prop == "toString"){
            count++;
        }
    }
    return (count > 1);
}();

       

　　3.用户代理检测：用过检测代理字符串来识别浏览器。用户代理来识别浏览器版本。用户代理字符串中包含大量与浏览器有关的信息，包括浏览器、平台、操作系统及浏览器版本。用户代理字符串有过一段相当长的发展历史，在此期间，浏览器提供商试图通过在用户代理检测需要特殊的技巧，特别是要注意Opera会隐瞒其用户代理字符串情况。即便如此，用过用户代理字符串任然能够检测出浏览器所用的呈现引擎以及所在的平台，包括移动设备和游戏系统。

在决定使用哪种客户端检测方法时，一般优先考虑使用能力检测。怪癖检测是确定应该如何处理代码的第二选择。而用户代理字符串是最后一种方案，因为这种方法对用户代理字符串具有很强的依赖性。

 var client=function(){
  //呈现引擎信息
  var engine = {
    //呈现引擎
    ie: 0,
    gecko: 0,
    webkit: 0,
    khtml: 0,
    opera:0,
    //具体版本号
    ver: null
  };
 
  var browser = {
    //浏览器
    ie: 0,
    edge: 0,
    firefox: 0,
    safari: 0,
    konq: 0,
    opera: 0,
    chrome: 0,
    //具体版本号
    ver: null
  };
 
  //平台、设备和操作系统
  var system = {
    win: false,
    mac: false,
    unix: false,
 
    //移动设备
    iphone: false,
    ipod: false,
    ipad: false,
    ios: false,
    android: false,
    nokiaN: false,
    winMobile: false,
 
    //游戏系统
    wii: false, //任天堂
    ps: false  //Playstation3
  };
 
  //获取浏览器的用户代理字符串
  var ua = window.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);
    if(/Edge\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.edge = parseFloat(browser.ver);
    }
    else if(/OPR\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.opera = parseFloat(browser.ver);
    }
    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.ver = browser.safari = safariVersion;
    }
  }
  else if(/KHTML\/(\S+)/.test(ua) || /Konqueror\/(\S+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);s
  }
  else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
    if(/Firefox\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.firefox = parseFloat(browser.ver);
    }
  }
  else if(/MSIE ([^;]+)/.test(ua) || /rv:([^\)]+)\) like Gecko/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
  }
 
  //获取平台或者操作系统信息,可能的值：win32、win64、MacPPC、MacIntel、Xll、Linux i686
  var p = window.navigator.platform;
 
  //检测平台
  system.win = p.indexOf("Win") == 0;
  system.mac = p.indexOf("Mac") == 0;
  system.unix = (p == "Xll'") || (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 "7":
            system.win = "7";
            break;
          case "8":
            system.win = "8";
            break;
          case "8.1":
            system.win = "8.1";
            break;
          case "10.0":
            system.win = "10.0";
            break;
          default:
            system.win = "NT";
            break;
        }
      }
    }
  }
 
  //移动设备
  system.iphone = ua.indexOf("iPhone") > -1;
  system.ipod = ua.indexOf("iPod") > -1;
  system.ipad = ua.indexOf("iPad") > -1;
  system.nokiaN = ua.indexOf("NokiaN") > -1;
 
  //window 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
  };
}();

alert(client.browser.ver);