高程3總結#第9章客戶端檢測
阿新 • • 發佈：2018-12-09
客戶端檢測
能力檢測
-
能力檢測的目的不是識別特定的瀏覽器，而是識別瀏覽器的能力，採用這種方式不必顧忌特定的瀏覽器，只要確定瀏覽器支援的特定的能力，就能給出解決方案，檢測基本模式
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會隱瞞其使用者代理字串的情況。即便如此，通過使用者代理字串仍然能夠檢測出瀏覽器所用的呈現引擎以及所在的平臺，包括移動裝置和遊戲系統。