高程3總結(jié)#第9章客戶端檢測

BigNerdCoding 發(fā)布于2019-08-23 11:58 / 690人閱讀

摘要：能力檢測無法精確地檢測特定的瀏覽器和版本。用戶代理檢測通過檢測用戶代理字符串來識(shí)別瀏覽器。用戶代理檢測需要特殊的技巧，特別是要注意會(huì)隱瞞其用戶代理字符串的情況。

客戶端檢測 能力檢測

能力檢測的目的不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力，采用這種方式不必顧忌特定的瀏覽器，只要確定瀏覽器支持的特定的能力，就能給出解決方案，檢測基本模式

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

比如，IE5之前的版本不支持document.getElementById()這個(gè)方法

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!")
  }
}

檢測某個(gè)屬性是否存在，并不能確定是否支持這個(gè)函數(shù)，更好的方式是檢測這個(gè)函數(shù)是不是一個(gè)函數(shù)

function isSortable(object){
  return typeof object.sort=="funciton";
}

在IE中，檢測document.createElement()是否存在會(huì)返回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;
}();

用戶代理檢測

電子欺騙：瀏覽器通過在自己的用戶代理字符串加入一些錯(cuò)誤或誤導(dǎo)性信息，來達(dá)到欺騙服務(wù)器的目的。

用戶代理字符串發(fā)展歷史

產(chǎn)品標(biāo)識(shí)符常用于通信應(yīng)用程序標(biāo)識(shí)自身，由軟件名和版本組成，使用產(chǎn)品標(biāo)識(shí)符的大多數(shù)領(lǐng)域也允許列出作為應(yīng)用程序主要部分的子產(chǎn)品，由空格分隔。按照慣例，產(chǎn)品要按照相應(yīng)的重要程度依次列出，以便標(biāo)識(shí)應(yīng)用程序。

早期瀏覽器

Mozilla/版本號(hào) [語言] (平臺(tái)；加密類型)=>Mozilla/2.20 [fr] (WinNT;I)

Netscape navigator 3和Internet Explorer 3

Mozilla/版本號(hào) (平臺(tái); 加密類型 [; 操作系統(tǒng)或 CPU 說明])=>Mozilla/3.0 (Win95; U)

Mozilla/2.0 (compatible; MSIE 版本號(hào); 操作系統(tǒng))=>Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)

Netscape Communicator 4和IE4~IE8

Mozilla/版本號(hào) (平臺(tái); 加密類型 [; 操作系統(tǒng)或 CPU 說明])=>Mozilla/4.0 (Win98; I)

Mozilla/4.0 (compatible; MSIE 版本號(hào); 操作系統(tǒng))=>Mozilla/4.0 (compatible; MSIE 4.0; Windows 98)

Mozilla/4.0 (compatible; MSIE 版本號(hào); 操作系統(tǒng); Trident/Trident 版本號(hào))=>Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)

Gecko

Mozilla/Mozilla 版本號(hào) (平臺(tái); 加密類型; 操作系統(tǒng)或 CPU; 語言; 預(yù)先發(fā)行版本)Gecko/Gecko 版本號(hào) 應(yīng)用程序或產(chǎn)品/應(yīng)用程序或產(chǎn)品版本號(hào)

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 (平臺(tái); 加密類型; 操作系統(tǒng)或 CPU; 語言) AppleWebKit/AppleWebKit 版本號(hào)(KHTML, like Gecko) Safari/Safari 版本號(hào)=>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko)Safari/125.1

Konqueror

Mozilla/5.0 (compatible; Konqueror/ 版本號(hào); 操作系統(tǒng)或 CPU) KHTML/ KHTML 版本號(hào) (like Gecko)=>Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)

Chrome

Mozilla/5.0 ( 平臺(tái); 加密類型; 操作系統(tǒng)或 CPU; 語言) AppleWebKit/AppleWebKit 版本號(hào) (KHTML,like Gecko) Chrome/ Chrome 版本號(hào) 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/ 版本號(hào) (操作系統(tǒng)或 CPU; 加密類型) [語言]=>Opera/7.54 (Windows NT 5.1; U) [en]

Opera/ 版本號(hào) (操作系統(tǒng)或 CPU; 加密類型; 語言)=>Opera/8.0 (Windows NT 5.1; U; en)

Opera/9.80 (操作系統(tǒng)或 CPU; 加密類型; 語言) Presto/Presto 版本號(hào) Version/版本號(hào)=>Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63

IOS和Android

Mozilla/5.0 (平臺(tái); 加密類型; 操作系統(tǒng)或 CPU like Mac OS X; 語言)AppleWebKit/AppleWebKit 版本號(hào) (KHTML, like Gecko) Version/瀏覽器版本號(hào) Mobile/移動(dòng)版本號(hào) Safari/Safari 版本號(hào)=>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(){
//呈現(xiàn)引擎
var engine = {
  ie: 0,
  gecko: 0,
  webkit: 0,
  khtml: 0,
  opera: 0,
  //完整的版本號(hào)
  ver: null
};
//瀏覽器
var browser = {
  //主要瀏覽器
  ie: 0,
  firefox: 0,
  safari: 0,
  konq: 0,
  opera: 0
  chrome: 0,
  //具體的版本號(hào)
  ver: null
};
//平臺(tái)、設(shè)備和操作系統(tǒng)
var system = {
  win: false,
  mac: false,
  x11: false,
  //移動(dòng)設(shè)備
  iphone: false,
  ipod: false,
  ipad: false,
  ios: false,
  android: false,
  nokiaN: false,
  winMobile: false,
  //游戲系統(tǒng)
  wii: false,
  ps: false
};
//檢測呈現(xiàn)引擎和瀏覽器
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 {
    //近似地確定版本號(hào)
    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;
//檢測平臺(tái)
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 操作系統(tǒng)
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"];
    }
  }
}
//移動(dòng)設(shè)備
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);
}
//游戲系統(tǒng)
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);
//返回這些對象
return {
  engine: engine,
  browser: browser,
  system: system
};
}()

總結(jié)

能力檢測

在編寫代碼之前先檢測特定瀏覽器的能力。例如，腳本在調(diào)用某個(gè)函數(shù)之前，可能要先檢測該函數(shù)是否存在。這種檢測方法將開發(fā)人員從考慮具體的瀏覽器類型和版本中解放出來，讓他們把注意力集中到相應(yīng)的能力是否存在上。能力檢測無法精確地檢測特定的瀏覽器和版本。

怪癖檢測

怪癖實(shí)際上是瀏覽器實(shí)現(xiàn)中存在的 bug，例如早期的 WebKit 中就存在一個(gè)怪癖，即它會(huì)在 for-in 循環(huán)中返回被隱藏的屬性。怪癖檢測通常涉及到運(yùn)行一小段代碼，然后確定瀏覽器是否存在某個(gè)怪癖。由于怪癖檢測與能力檢測相比效率更低，因此應(yīng)該只在某個(gè)怪癖會(huì)干擾腳本運(yùn)行的情況下使用。怪癖檢測無法精確地檢測特定的瀏覽器和版本。

用戶代理檢測

通過檢測用戶代理字符串來識(shí)別瀏覽器。用戶代理字符串中包含大量與瀏覽器有關(guān)的信息，包括瀏覽器、平臺(tái)、操作系統(tǒng)及瀏覽器版本。用戶代理字符串有過一段相當(dāng)長的發(fā)展歷史，在此期間，瀏覽器提供商試圖通過在用戶代理字符串中添加一些欺騙性信息，欺騙網(wǎng)站相信自己的瀏覽器是另外一種瀏覽器。用戶代理檢測需要特殊的技巧，特別是要注意 Opera會(huì)隱瞞其用戶代理字符串的情況。即便如此，通過用戶代理字符串仍然能夠檢測出瀏覽器所用的呈現(xiàn)引擎以及所在的平臺(tái)，包括移動(dòng)設(shè)備和游戲系統(tǒng)。