高程3总结#第9章客户端检测

客户端检测

能力检测

能力检测的目的不是识别特定的浏览器，而是识别浏览器的能力，采用这种方式不必顾忌特定的浏览器，只要确定浏览器支持的特定的能力，就能给出解决方案，检测基本模式
```
if(object.propertyInQuestion){
  //使用object.propertyInQuestion
}
```

比如，IE5之前的版本不支持document.getElementById()这个方法

function getElement(id){
  if(document.getElementById){
    return document.getElementById(id);
  }else if(document.all){
    return document.all(id);
  }else {
    throw new Error("No way to retrieve element!")
  }
}

检测某个属性是否存在，并不能确定是否支持这个函数，更好的方式是检测这个函数是不是一个函数
```
function isSortable(object){
  return typeof object.sort=="funciton";
}
```

在IE中，检测document.createElement()是否存在会返回false，可以使用isHostMethod方法

function isHostMethod(object,property){
  var t=typeof object(property);
  return t=='function'||(!!(t=='object'&&object[property]))||t=='unknow'
}

//使用
result=isHostMethod(xhr,"open");//true
result=isHostMethod(xhr,"foo");//false

怪癖检测

怪癖检测是想要知道浏览器存在什么缺陷，也就是bug

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

用户代理检测

电子欺骗：浏览器通过在自己的用户代理字符串加入一些错误或误导性信息，来达到欺骗服务器的目的。

用户代理字符串发展历史

产品标识符常用于通信应用程序标识自身，由软件名和版本组成，使用产品标识符的大多数领域也允许列出作为应用程序主要部分的子产品，由空格分隔。按照惯例，产品要按照相应的重要程度依次列出，以便标识应用程序。
- 早期浏览器
  - Mozilla/版本号 [语言] (平台；加密类型)=>Mozilla/2.20 [fr] (WinNT;I)
- Netscape navigator 3和Internet Explorer 3
  - Mozilla/版本号 (平台; 加密类型 [; 操作系统或 CPU 说明])=>Mozilla/3.0 (Win95; U)
  - Mozilla/2.0 (compatible; MSIE 版本号; 操作系统)=>Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
- Netscape Communicator 4和IE4~IE8
  - Mozilla/版本号 (平台; 加密类型 [; 操作系统或 CPU 说明])=>Mozilla/4.0 (Win98; I)
  - Mozilla/4.0 (compatible; MSIE 版本号; 操作系统)=>Mozilla/4.0 (compatible; MSIE 4.0; Windows 98)
  - Mozilla/4.0 (compatible; MSIE 版本号; 操作系统; Trident/Trident 版本号)=>Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
- Gecko
  - Mozilla/Mozilla 版本号 (平台; 加密类型; 操作系统或 CPU; 语言; 预先发行版本)Gecko/Gecko 版本号应用程序或产品/应用程序或产品版本号
  - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
  - Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2) Gecko/20060823 SeaMonkey/1.1a
  - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
  - Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en; rv:1.8.1.6) Gecko/20070809 Camino/1.5.1
- WebKit
  - Mozilla/5.0 (平台; 加密类型; 操作系统或 CPU; 语言) AppleWebKit/AppleWebKit 版本号(KHTML, like Gecko) Safari/Safari 版本号=>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko)Safari/125.1
- Konqueror
  - Mozilla/5.0 (compatible; Konqueror/ 版本号; 操作系统或 CPU) KHTML/ KHTML 版本号 (like Gecko)=>Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)
- Chrome
  - Mozilla/5.0 ( 平台; 加密类型; 操作系统或 CPU; 语言) AppleWebKit/AppleWebKit 版本号 (KHTML,like Gecko) Chrome/ Chrome 版本号 Safari/ Safari 版本=>Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.7 (KHTML,
    like Gecko) Chrome/7.0.517.44 Safari/534.7
- Opera
  - Opera/ 版本号 (操作系统或 CPU; 加密类型) [语言]=>Opera/7.54 (Windows NT 5.1; U) [en]
  - Opera/ 版本号 (操作系统或 CPU; 加密类型; 语言)=>Opera/8.0 (Windows NT 5.1; U; en)
  - Opera/9.80 (操作系统或 CPU; 加密类型; 语言) Presto/Presto 版本号 Version/版本号=>Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63
- IOS和Android
  - Mozilla/5.0 (平台; 加密类型; 操作系统或 CPU like Mac OS X; 语言)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/7A341 Safari/528.16

完整代码

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
};
}()

总结

能力检测
- 在编写代码之前先检测特定浏览器的能力。例如，脚本在调用某个函数之前，可能要先检测该函数是否存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让他们把注意力集中到相应的能力是否存在上。能力检测无法精确地检测特定的浏览器和版本。
怪癖检测
- 怪癖实际上是浏览器实现中存在的 bug，例如早期的 WebKit 中就存在一个怪癖，即它会在 for-in 循环中返回被隐藏的属性。怪癖检测通常涉及到运行一小段代码，然后确定浏览器是否存在某个怪癖。由于怪癖检测与能力检测相比效率更低，因此应该只在某个怪癖会干扰脚本运行的情况下使用。怪癖检测无法精确地检测特定的浏览器和版本。
用户代理检测
- 通过检测用户代理字符串来识别浏览器。用户代理字符串中包含大量与浏览器有关的信息，包括浏览器、平台、操作系统及浏览器版本。用户代理字符串有过一段相当长的发展历史，在此期间，浏览器提供商试图通过在用户代理字符串中添加一些欺骗性信息，欺骗网站相信自己的浏览器是另外一种浏览器。用户代理检测需要特殊的技巧，特别是要注意 Opera会隐瞒其用户代理字符串的情况。即便如此，通过用户代理字符串仍然能够检测出浏览器所用的呈现引擎以及所在的平台，包括移动设备和游戏系统。

高程3总结#第9章客户端检测

客户端检测

能力检测

怪癖检测

用户代理检测

用户代理字符串发展历史

完整代码

总结

神膘护体小月半

引用和评论

对象数组按照非升序或降序的既定顺序排序

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具