資訊專欄INFORMATION COLUMN
摘要：在前端應用里，有時候我們需要根據運行環境的不同做出對應處理。另一個重要的字段為下面這段不到行的代碼通過使用正則表達式處理對象中的和字段來判斷當前前端應用運行的環境，支持三種操作系統，等移動平臺。執行后，會彈出檢測出的運行環境和版本號。
我們部署在某些云平臺或者Web服務器上的前端應用，既可以用PC端瀏覽器訪問，也可以用手機上的瀏覽器訪問。
在前端應用里，有時候我們需要根據運行環境的不同做出對應處理。比如下面這段邏輯，如果判斷出應用當前是運行在手機上，則需要設置對應的viewport。
if (this.isMobile()) {
var viewport = document.querySelector("meta[name=viewport]");
if (viewport) {
viewport.setAttribute("content", "width = " + window.innerWidth + ", height = " + window.innerHeight + ", maximum-scale = 1.25, minimum-scale = 1.25");
}
}
那么如何實現isMobile函數呢？
我們打開Chrome開發者工具，在console標簽頁輸入navigator，回車，會發現這個對象包含了非常多的有用信息。
其中有個字段platform: 我如果在安裝了Windows系統的電腦上使用Chrome，該值為Win32。
另一個重要的字段為userAgent：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
下面這段不到100行的JavaScript代碼通過使用正則表達式處理navigator對象中的platform和userAgent字段來判斷當前前端應用運行的環境，支持Windows/Linux/Macintosh三種操作系統，iOS/Android/BlackBerry/Windows Phone等移動平臺。
代碼如下。您也可以在我的github上找到這段代碼。執行后，會彈出檢測出的運行環境和版本號。
https://github.com/i042416/Kn...
< html >
<
script >
var OS = {
"WINDOWS": "win",
"MACINTOSH": "mac",
"LINUX": "linux",
"IOS": "iOS",
"ANDROID": "Android",
"BLACKBERRY": "bb",
"WINDOWS_PHONE": "winphone"
};
var result = getOS();
alert(JSON.stringify(result));
function getOS() {
var userAgent = navigator.userAgent;
var platform, result;
function getDesktopOS() {
var pf = navigator.platform;
if (pf.indexOf("Win") != -1) { // 說明當前是Windows操作系統
var rVersion = /Windows NT (d+).(d)/i;
var uaResult = userAgent.match(rVersion);
var sVersionStr = "";
if (uaResult[1] == "6") {
if (uaResult[2] == 1) {
sVersionStr = "7"; // 說明當前運行在Windows 7 中
} else if (uaResult[2] > 1) {
sVersionStr = "8"; // 說明當前運行在Windows 8 中
}
} else {
sVersionStr = uaResult[1];
}
return { "name": OS.WINDOWS, "versionStr": sVersionStr };
} else if (pf.indexOf("Mac") != -1) {
return { "name": OS.MACINTOSH, "versionStr": "" }; // Macintosh操作系統
} else if (pf.indexOf("Linux") != -1) {
return { "name": OS.LINUX, "versionStr": "" }; // 說明當前運行在Linux操作系統
}
return null;
}
platform = /Windows Phone (?:OS )?([d.]*)/; // windows phone的正則表達式
result = userAgent.match(platform);
if (result) {
return ({ "name": OS.WINDOWS_PHONE, "versionStr": result[1] });
}
// BlackBerry 10
if (userAgent.indexOf("(BB10;") > 0) {
platform = /sVersion/ ([d.] + ) s / ; // BlackBerry的regular expression
result = userAgent.match(platform);
if (result) {
return { "name": OS.BLACKBERRY, "versionStr": result[1] };
} else {
return { "name": OS.BLACKBERRY, "versionStr": "10" };
}
}
// iOS, Android, BlackBerry 6.0+:
platform = /(([a-zA-Z ]+);s(?:[U]?[;]?)([D]+)((?:[d._]*))(?:.*[)][^d]*)([d.]*)s/;
result = userAgent.match(platform);
if (result) {
var appleDevices = /iPhone|iPad|iPod/;
var bbDevices = /PlayBook|BlackBerry/;
if (result[0].match(appleDevices)) {
result[3] = result[3].replace(/_/g, ".");
return ({ "name": OS.IOS, "versionStr": result[3] }); // iOS操作系統
} else if (result[2].match(/Android/)) {
result[2] = result[2].replace(/s/g, "");
return ({ "name": OS.ANDROID, "versionStr": result[3] }); // Android操作系統
} else if (result[0].match(bbDevices)) {
return ({ "name": OS.BLACKBERRY, "versionStr": result[4] }); // Blackberry
}
}
//Android平臺上的Firefox瀏覽器
platform = /((Android)[s]?([d][.d]*)?;.*Firefox/ [d][.d] * /;
result = userAgent.match(platform);
if (result) {
return ({ "name": OS.ANDROID, "versionStr": result.length == 3 ? result[2] : "" });
}
// Desktop
return getDesktopOS();
}
<
/script>
<
/html>
要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98586.html
摘要：歡迎使用中文文檔架構概覽是網易項目團隊開發的一個基于進行開發的應用層框架，提供了一個輕量級的容器來編寫簡單可維護的。 JavaScript 可以……嘛，不就是操作一下 DOM，可以讓元素飛來飛去嗎JavaScript 是……不就是用 jQuery 讓網頁動起來，頂多就是再用用 Ajax 和后端進行一下數據交換嗎JavaScript 是一門……最討厭和鄙視這種弱類型不需要編譯的腳本語言...
閱讀 1508·2023-04-26 00:25
閱讀 906·2021-09-27 13:36
閱讀 930·2019-08-30 14:14
閱讀 2172·2019-08-29 17:10
閱讀 1006·2019-08-29 15:09
閱讀 1942·2019-08-28 18:21
閱讀 962·2019-08-26 13:27
閱讀 971·2019-08-26 10:58
