認(rèn)識(shí)瀏覽器

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

• 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

國(guó)產(chǎn)常用瀏覽器品牌：按照國(guó)內(nèi)使用率排序，大多基于開(kāi)源項(xiàng)目Chromium進(jìn)行開(kāi)發(fā)

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

實(shí)現(xiàn)功能

• 判斷用戶瀏覽器使用系統(tǒng)和版本
• 判斷用戶瀏覽器是桌面端還是移動(dòng)端，顯示對(duì)應(yīng)的主題樣式
• 判斷瀏覽器是Android端還是iOS端，跳轉(zhuǎn)到對(duì)應(yīng)的app下載鏈接
• 判斷用戶瀏覽器的內(nèi)核和在臺(tái)用于統(tǒng)計(jì)用戶設(shè)備平臺(tái)分布區(qū)間
• 判斷用戶瀏覽器的載體版本，用與提示更新信息

瀏覽器信息：按權(quán)重降序排序

• 瀏覽器系統(tǒng)：所運(yùn)行的操作系統(tǒng)，包含Windows、MacOS、Linux、Android、iOS
• 瀏覽器平臺(tái)：所運(yùn)行的設(shè)備平臺(tái)，包含Desktop桌面端、Mobile移動(dòng)端
• 瀏覽器內(nèi)核：瀏覽器渲染引擎，包含Webkit、Gecko、Presto、Trident
• 瀏覽器載體：五大瀏覽器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge
• 瀏覽器外殼：基于五大瀏覽器品牌的內(nèi)核進(jìn)行開(kāi)發(fā)，再套一層自研技術(shù)的外殼，如國(guó)內(nèi)眾多瀏覽器品牌

獲取UserAgent是否包含字段：判斷是否包含系統(tǒng)、平臺(tái)、內(nèi)核、載體、外殼的特有字段

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

獲取UserAgent對(duì)應(yīng)字段的版本

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

方案

按照權(quán)重(系統(tǒng) + 系統(tǒng)版本 > 平臺(tái) > 內(nèi)核 + 載體 + 內(nèi)核版本 + 載體版本 > 外殼 + 外殼版本)根據(jù)系統(tǒng)、平臺(tái)、內(nèi)核、載體、外殼的特有字段來(lái)歸類統(tǒng)一瀏覽器運(yùn)行環(huán)境。

系統(tǒng)+系統(tǒng)版本

//系統(tǒng) let system = "unknown"; if (testUa(/windows|win32|win64|wow32|wow64/ig)) {system = "windows"; //Windows系統(tǒng) } else if (testUa(/macintosh|macintel/ig)) {system = "macos"; //Macos系統(tǒng) } else if (testUa(/x11/ig)) {system = "linux"; //Linux系統(tǒng) } else if (testUa(/android|adr/ig)) {system = "andriod"; //Android 系統(tǒng) } else if (testUa(/ios|iphone|ipad|iwatch/ig)) {system = "ios"; // iOS系統(tǒng) } //系統(tǒng)版本 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); }

平臺(tái)

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

內(nèi)核+載體

//內(nèi)核+載體 let engine = "unknown"; let supporter = "unknown"; if (testUa(/applewebkit/ig) && testUa(/safsri/ig)) {engine = "webkit"; //webkit內(nèi)核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內(nèi)核supporter = "firefox"; //Firefox瀏覽器 } else if (testUa(/presto/ig)) {engine = "presto"; //presto 內(nèi)核supporter = "opera"; //Opera 瀏覽器 } else if (testUa(/trident|compatible|msie/ig)) {engine = "trident"; //trident 內(nèi)核supporter = "iexplore"; //IE 瀏覽器 }

內(nèi)核版本+載體版本

//內(nèi)核版本 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); }

構(gòu)造函數(shù)輸出對(duì)象

將所有判斷條件合并成一個(gè)對(duì)象輸出，代碼未優(yōu)化。

• ystem：系統(tǒng)
• systemVs：系統(tǒng)版本
• platform：平臺(tái)
• engine：內(nèi)核
• engineVs：內(nèi)核版本
• 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}); }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。