認識瀏覽器

五大國際瀏覽器品牌：按照全球使用率排序

• Google Chrome：Windows、MacOS、Linux、Android、iOS
• Apple Safari：MacOS、iOS
• Mozilla Firefox：Windows、MacOS、Linux、Android、iOS
• ASA Opera：Windows、MacOS、Linux、Android、iOS
• Microsoft Internet Explorer或Microsoft Edge：Windows

國產常用瀏覽器品牌：按照國內使用率排序，大多基于開源項目Chromium進行開發

• 微信瀏覽器
• QQ瀏覽器
• UC瀏覽器
• 2345瀏覽器
• 搜狗瀏覽器
• 獵豹瀏覽器
• 遨游瀏覽器
• 百度瀏覽器：百度在2019年04月30日宣布停止服務
• 其他瀏覽器：很多很多，數不清，我就不列出來了

實現功能

• 判斷用戶瀏覽器使用系統和版本
• 判斷用戶瀏覽器是桌面端還是移動端，顯示對應的主題樣式
• 判斷瀏覽器是Android端還是iOS端，跳轉到對應的app下載鏈接
• 判斷用戶瀏覽器的內核和在臺用于統計用戶設備平臺分布區間
• 判斷用戶瀏覽器的載體版本，用與提示更新信息

瀏覽器信息：按權重降序排序

• 瀏覽器系統：所運行的操作系統，包含Windows、MacOS、Linux、Android、iOS
• 瀏覽器平臺：所運行的設備平臺，包含Desktop桌面端、Mobile移動端
• 瀏覽器內核：瀏覽器渲染引擎，包含Webkit、Gecko、Presto、Trident
• 瀏覽器載體：五大瀏覽器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge
• 瀏覽器外殼：基于五大瀏覽器品牌的內核進行開發，再套一層自研技術的外殼，如國內眾多瀏覽器品牌

獲取UserAgent是否包含字段：判斷是否包含系統、平臺、內核、載體、外殼的特有字段

const testUa = regexp => regexp.test(ua);

獲取UserAgent對應字段的版本

const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");

方案

按照權重(系統 + 系統版本 > 平臺 > 內核 + 載體 + 內核版本 + 載體版本 > 外殼 + 外殼版本)根據系統、平臺、內核、載體、外殼的特有字段來歸類統一瀏覽器運行環境。

系統+系統版本

//系統 let system = "unknown"; if (testUa(/windows|win32|win64|wow32|wow64/ig)) {system = "windows"; //Windows系統 } else if (testUa(/macintosh|macintel/ig)) {system = "macos"; //Macos系統 } else if (testUa(/x11/ig)) {system = "linux"; //Linux系統 } else if (testUa(/android|adr/ig)) {system = "andriod"; //Android 系統 } else if (testUa(/ios|iphone|ipad|iwatch/ig)) {system = "ios"; // iOS系統 } //系統版本 let systemVs = "unknown"; if (system ==="windows") { //windos版本if (testUa(/windos nt 5.0|windows 2000/ig)) {systemVs = "2000";} else if(testUa(/windows nt 5.1|windows xp/ig)){systemVs="xp";}else if(testUa(/windows nt 5.2|windows 2003/ig)){systemVs="2003";}else if(testUa(/windows nt 6.0|windows vista/ig)){systemVs="vista";}else if(testUa(/windows nt 6.1|windows 7/ig)){systemVs="7";}else if(testUa(/windows nt 6.2|windows 8/ig)){systemVs="8";}else if(testUa(/windows nt 6.3|windows 8.1/ig)){systemVs="8.1";}else if(testUa(/windows nt 10.0|windows 10/ig)){systemVs="10";} }else if(system==="macos"){systemVs=testVs(/os x [\d._]+/ig); }else if(system==="andriod"){systemVs=testVs(/andriod [\d._]+/ig); }else if(system==="ios"){systemVs=testVs(/os [\d._]+/ig); }

平臺

//平臺 let platform = "unknow"; if (system === "windows" || system === "macos" || system === "linux") {platform = "desktop"; //桌面端 } else if (system === "andriod" || system === "ios" || testUa(/mobile/ig)) {platform = "mobile"; //移動端 }

內核+載體

//內核+載體 let engine = "unknown"; let supporter = "unknown"; if (testUa(/applewebkit/ig) && testUa(/safsri/ig)) {engine = "webkit"; //webkit內核if (testUa(/edge/ig)) {supporter = "edge"; //Edge瀏覽器} else if (testUa(/opr/ig)) {supporter = "opr"; //Opera瀏覽器} else if (testUa(/chrome/ig)) {supporter = "chrome"; //Chrome瀏覽器} else {supporter = "safari"; //Safari瀏覽器} } else if (testUa(/gecko/ig) && testUa(/firefox/ig)) {engine = "gecko"; //gecko內核supporter = "firefox"; //Firefox瀏覽器 } else if (testUa(/presto/ig)) {engine = "presto"; //presto 內核supporter = "opera"; //Opera 瀏覽器 } else if (testUa(/trident|compatible|msie/ig)) {engine = "trident"; //trident 內核supporter = "iexplore"; //IE 瀏覽器 }

內核版本+載體版本

//內核版本 let engineVs="unknown"; if(engine==="webkit"){engineVs=testVs(/applewebkit\/[\d.]+/ig); }else if(engine==="gecko"){engineVs=testVs(/gecko\/[\d.]+/ig); }else if(engine==="presto"){engineVs=testVs(/presto\/[\d.]+/ig); }else if(engine==="trident"){engineVs=testVs(/trident\/[\d.]+/ig); } //載體版本 let supporterVs="unknown"; if(supporter==="chrome"){supporterVs=testVs(/chrome\/[\d.]+/ig) }else if(supporter==="safari"){supporterVs = testVs(/verison\/[\d.]+/ig)}else if (supporter === "firefox") {supporterVs = testVs(/firefox\/[\d.]+/ig)} else if (supporter === "opera") {supporterVs = testVs(/opr\/[\d.]+/ig)} else if (supporter === "iexploer") {supporterVs = testVs(/(msie\/[\d.]+)|(rv:[\d.]+)/ig)} else if (supporter === "edge") {supporterVs = testVs(/edge\/[\d.]+/ig)}

外殼+外殼版本

//外殼+外殼版本 let shell="none";//外殼 let shellVs="unknown"; if(testUa(/micromessenger/ig)){shell="wechat"; //微信瀏覽器shellVs=testVs(/micromessenger\/[\d.]+/ig); }else if(testUa(/qqbrowser/ig)){shell="qq";//QQ瀏覽器shellVs=testVs(/qqbrowser\/[\d.]+/ig); } else if (testUa(/ubrowser/ig)) {shell = "uc"; //UC瀏覽器shellVs = testVs(/ubrowser\/[\d.]+/ig); } else if (testUa(/2345explorer/ig)) {shell = "2345"; //2345瀏覽器shellVs = testVs(/2345explorer\/[\d.]+/ig); } else if (testUa(/metasr/ig)) {shell = "sougou"; //搜狗瀏覽器 } else if (testUa(/lbbrowser/ig)) {shell = "liebao"; //獵豹瀏覽器 } else if (testUa(/maxthon/ig)) {shell = "maxthon"; //傲游瀏覽器shellVs = testVs(/maxthon\/[\d.]+/ig); } else if (testUa(/bidubrowser/ig)) {shell = "baidu";shellVs = testVs(/bidubrowser [\d.]+/ig); }

構造函數輸出對象

將所有判斷條件合并成一個對象輸出，代碼未優化。

• ystem：系統
• systemVs：系統版本
• platform：平臺
• engine：內核
• engineVs：內核版本
• supporter：載體
• supporterVs：載體版本
• shell：外殼
• shellVs：外殼版本

function BrowserType() {const ua = navigator.userAgent.toLowerCase();const testUa = regexp => regexp.test(ua);const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");// 接上以上if...else條件判斷// ......// 獲取到system、systemVs、platform、engine、engineVs、supporter、supporterVs、shell、shellVsreturn Object.assign({engine, // webkit gecko presto tridentengineVs,platform, // desktop mobilesupporter, // chrome safari firefox opera iexplore edgesupporterVs,system, // windows macos linux android iossystemVs}, shell === "none" ? {} : {shell, // wechat qq uc 2345 sougou liebao maxthon baidushellVs}); }

總結

以上是生活随笔為你收集整理的javascript判断浏览器当前运行环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。