使用userAgent檢測核心、平臺、Windows 作業系統、移動裝置..
阿新 • • 發佈：2019-01-12
使用程式碼來自JS高程設計第9章
客戶端檢測方式:
-
能力檢測：在編寫程式碼之前先檢測特定瀏覽器的能力。例如，指令碼在呼叫某個函式之前，可能要先檢測該函式是否存在。這種檢測方法將開發人員從考慮具體的瀏覽器型別和版本中解放出來，讓他們把注意力集中到相應的能力是否存在上。
-
怪癖檢測：怪癖實際上是瀏覽器實現中存在的bug，怪癖檢測通常涉及到執行一小段程式碼，通過程式碼檢測系統方法是否是正常輸出。
-
使用者代理檢測：通過檢測使用者代理字串來識別瀏覽器。
在決定使用哪種客戶端檢測方法時，一般應優先考慮使用能力檢測。怪癖檢測是確定應該如何處理程式碼的第二選擇。而使用者代理檢測則是客戶端檢測的最後一種方案，因為這種方法對使用者代理字串具有很強的依賴性。
使用使用者代理檢測獲取資料
export 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 }; }();
如果只想輸出有效資訊可以做如下操作
var data = {}; var allObject = Object.assign(client.browser, client.engine, client.system); for (let i in allObject){ if (allObject[i]) { data[i] = allObject[i] } } console.log(data); //結果 //{chrome: 70, ver: "537.36", webkit: 537.36, win: true, android: 5}