資訊專欄INFORMATION COLUMN
摘要：檢測腳本的基本代碼結構如下所示呈現引擎具體的版本號檢測呈現引擎全局變量，用于保存相關信息。如果檢測到了哪個呈現引擎，那么就以浮點數值形式將該引擎的版本號寫入相應的屬性。
前言
前端這東西，各種先有事實后有標準。不管是各大瀏覽器老哥各自為政，還是w3c姍姍來遲，既有事實標準難以更改。雖說多方割據，互相競爭，總比一家獨大，愛更不更來得好。但卻苦了我們這些平頭小碼農?，頸椎病又加深了啊。
之前閱讀了《JavaScript高級程序設計》,今日準備將其用戶代理檢測源碼部分做個歸納。
槽不多吐，開始正文！
博文地址：客戶端檢測之用戶代理檢測 — navigator.userAgent
面對各瀏覽器普遍存在的不一致性問題，開發人員就得利用各種客戶端檢測方法，來突破或規避各種局限性。
檢測Web客戶端的手段很多，各有利弊。在服務器端，用戶代理檢測是一種常用且廣為接收的做法。通過對瀏覽器發送的用戶代理字符串的內容進行檢測，來識別用戶的瀏覽器。
BOM，即瀏覽器對象模型。BOM提供了很多對象，用于訪問瀏覽器的功能，且這些功能與網內內容無關。其主要方面已被w3c加入HTML5豪華套餐。
BOM包含window、location、navigator、screen、history對象，navigator對象中的userAgent屬性便是用戶代理字符串。
var ua = navigator.userAgent;//用戶代理字符串3.1 呈現引擎檢測
主要檢測五大呈現引擎（渲染引擎）：IE、Gecko、WebKit、KHTML 和 Opera。
為了不在全局作用域中添加多余的變量,使用模塊增強模式來封裝檢測腳本。檢測腳本的基本代碼結構如下所示：
var client = function () {
var engine = {
//呈現引擎
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
//具體的版本號
ver: null
};
//檢測呈現引擎
return {
engine: engine
};
}();
client全局變量，用于保存相關信息。匿名函數內部定義了一個局部變量engine,每個呈現引擎都對應著一個屬性，屬性的值默認為0。如果檢測到了哪個呈現引擎，那么就以浮點數值形式將該引擎的版本號寫入相應的屬性。而呈現引擎的完整版本（是一個字符串），則寫入ver屬性。
//檢測呈現引擎
var ua = navigator.userAgent;
if (window.opera) {
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
} else if (/AppleWebKit/(S+)/.test(ua)) {
engine.ver = RegExp["$1"];
engine.webkit = parseFloat(engine.ver);
} else if (/KHTML/(S+)/.test(ua)) {
engine.ver = RegExp["$1"];
engine.khtml = parseFloat(engine.ver);
} else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)) {
engine.ver = RegExp["$1"];
engine.gecko = parseFloat(engine.ver);
} else if (/MSIE ([^;]+)/.test(ua)) {
engine.ver = RegExp["$1"];
engine.ie = parseFloat(engine.ver);
}
3.2 識別瀏覽器
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
};
//檢測呈現引擎和瀏覽器
return {
engine: engine,
browser: browser
};
}();
代碼中又添加了私有變量browser ，用于保存每個主要瀏覽器的屬性。與engine變量一樣，除了當前使用的瀏覽器，其他屬性的值將保持為0；如果是當前使用的瀏覽器，則這個屬性中保存的是浮點數值形式的版本號。同樣，ver屬性中在必要時將會包含字符串形式的瀏覽器完整版本號。
由于大多數瀏覽器與其呈現引擎密切相關，所以下面示例中檢測瀏覽器的代碼與檢測呈現引擎的代碼是混合在一起的。
//檢測呈現引擎及瀏覽器
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);
}
3.3 識別系統平臺
很多時候，只要知道呈現引擎就足以編寫出適當的代碼了。但在某些條件下，平臺可能是必須關注的問題。那些具有各種平臺版本的瀏覽器（如 Safari、Firefox 和 Opera）,在不同的平臺下可能會有不同的問題。目前的三大主流平臺是 Windows、Mac 和 Unix（包括各種 Linux）。
再添加一個新對象：
var client = function () {
var system = {
win: false,
mac: false,
x11: false
};
//檢測設備
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p.indexOf("X11") == 0) || (p.indexOf("Linux" == 0);
return {
engine: engine,
browser: browser,
system: system
};
}();
3.3.1 識別具體Windows系統
在Windows平臺下，還可以從用戶代理字符串中進一步取得具體的操作系統信息。下表列出了不同瀏覽器在表示不同的Windows操作系統時給出的不同字符串：
由于用戶代理字符串中的Windows操作系統版本表示方法各異，因此檢測代碼并不十分直觀。好在，從 Windows 2000 開始，表示操作系統的字符串大部分都還相同，只有版本號有變化。為了檢測不同的Windows操作系統，必須要使用正則表達式。由于使用 Opera 7 之前版本的用戶已經不多了，因此我們可以忽略這部分瀏覽器。
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"];
}
}
}
3.3.2 識別移動設備
var client = function () {
var system = {
win: false,
mac: false,
x11: false,
// 移動設備
iphone: false,
ipod: false,
ipad: false,
ios: false,
android: false,
nokiaN: false,
winMobile: false
};
//檢測移動設備
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);
}
return {
engine: engine,
browser: browser,
system: system
};
}();
3.3.3 識別游戲系統
除了移動設備之外，視頻游戲系統中的 Web 瀏覽器也開始日益普及。任天堂 Wii和Playstation 3 或者內置 Web 瀏覽器，或者提供了瀏覽器下載。Wii 中的瀏覽器實際上是定制版的 Opera，是專門為 Wii Remote 設計的。Playstation 的瀏覽器是自己開發的，沒有基于前面提到的任何呈現引擎。這兩個瀏覽器中的用戶代理字符串如下所示：
Opera/9.10 (Nintendo Wii;U; ; 1621; en) Mozilla/5.0 (PLAYSTATION 3; 2.00)
第一個字符串來自運行在 Wii 中的 Opera，它忠實地繼承了 Opera 最初的用戶代理字符串格式。第二個字符串來自 Playstation 3，雖然它為了兼容性而將自己標識為 Mozilla 5.0，但并沒有給出太多信息，而且設備名稱全部使用了大寫字母。
var client = function () {
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
};
//檢測游戲系統
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);
return {
engine: engine,
browser: browser,
system: system
};
}();
3.4 完整代碼
UserAgentDetection.js
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51322.html
摘要：檢測腳本的基本代碼結構如下所示呈現引擎具體的版本號檢測呈現引擎全局變量，用于保存相關信息。如果檢測到了哪個呈現引擎，那么就以浮點數值形式將該引擎的版本號寫入相應的屬性。 前言 前端這東西，各種先有事實后有標準。不管是各大瀏覽器老哥各自為政，還是w3c姍姍來遲，既有事實標準難以更改。雖說多方割據，互相競爭，總比一家獨大，愛更不更來得好。但卻苦了我們這些平頭小碼農?，頸椎病又加深了啊。 ...
摘要：用戶代理檢測通過的屬性訪問。在服務器端，通過檢測用戶代理字符串來確定用戶使用的瀏覽器是一種常用的做法但在客戶端，用戶代理檢測一般為最低優先級。目前只要檢測五大呈現引擎即可和。 用戶代理檢測 通過 JavaScript 的 navigator.userAgent 屬性訪問。在服務器端，通過檢測用戶代理字符串來確定用戶使用的瀏覽器是一種常用的做法；但在客戶端，用戶代理檢測一般為最低優先級。...
摘要：由于怪癖檢測無法精確地檢測特定的瀏覽器和版本。用戶代理檢測需要特殊的技巧，特別是要注意會隱瞞其用戶代理字符串的情況。而在客戶端，用戶代理檢測一般被當作一種萬不得已的做法，其優先級排在能力檢測和怪癖檢測之后。 能力檢測 在編寫代碼之前先檢測特定瀏覽器的能力。例如,腳本在調用某個函數之前，可能要先檢測該函數首付存在。這種檢測方法將開發人員從考慮具體的瀏覽器類型和版本中解放出來，讓他們把注意...
摘要：用戶代理檢測用戶代理檢測是爭議最大的客戶端檢測技術。第二個要檢測是。由于實際的版本號可能會包含數字小數點和字母，所以捕獲組中使用了表示非空格的特殊字符。版本號不在后面，而是在后面。除了知道設備，最好還能知道的版本號。 檢測Web客戶端的手段很多，各有利弊，但不到萬不得已就不要使用客戶端檢測。只要能找到更通用的方法，就應該優先采用更通用的方法。一言蔽之，先設計最通用的方案，然后再使用特定...
摘要：客戶端檢測方式能力檢測怪癖檢測用戶代理檢測能力檢測最常用也是最為人們廣泛接受的客戶端檢測形式是能力檢測又稱特性檢測。在可能的情況下，盡量使用進行能力檢測。 客戶端檢測方式 能力檢測 怪癖檢測 用戶代理檢測 能力檢測 最常用也是最為人們廣泛接受的客戶端檢測形式是能力檢測（又稱特性檢測）。能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。采用這種方式不必顧及特定的瀏覽器如何...
閱讀 550·2021-11-25 09:44
閱讀 2636·2021-11-24 09:39
閱讀 2305·2021-11-22 15:29
閱讀 3520·2021-11-15 11:37
閱讀 3379·2021-09-24 10:36
閱讀 2507·2021-09-04 16:41
閱讀 992·2021-09-03 10:28
閱讀 1833·2019-08-30 15:55
