欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JavaScript怎么判斷瀏覽器運(yùn)行環(huán)境

這篇文章給大家分享的是有關(guān)JavaScript怎么判斷瀏覽器運(yùn)行環(huán)境的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供清鎮(zhèn)網(wǎng)站建設(shè)、清鎮(zhèn)做網(wǎng)站、清鎮(zhèn)網(wǎng)站設(shè)計(jì)、清鎮(zhèn)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、清鎮(zhèn)企業(yè)網(wǎng)站模板建站服務(wù)，10年清鎮(zhèn)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

前言

看到標(biāo)題，大家就能想起這個(gè)需求在很多項(xiàng)目上都能用到。我們部署在Web服務(wù)器上的前端應(yīng)用，既可以用PC瀏覽器訪問(wèn)，也可以用手機(jī)瀏覽器訪問(wèn)，再加上現(xiàn)在智能設(shè)備的推廣，我們甚至能在車載系統(tǒng)、穿戴設(shè)備和電視平臺(tái)上訪問(wèn)。

設(shè)備的多樣化讓用戶無(wú)處不在，有時(shí)候我們需要根據(jù)不同的瀏覽器運(yùn)行環(huán)境做出對(duì)應(yīng)的處理。瀏覽器是JavaScript的承載體，我們可以從瀏覽器上獲取相關(guān)的信息，來(lái)進(jìn)一步處理我們的業(yè)務(wù)邏輯。

然而瀏覽器品牌眾多，有些瀏覽器使用的標(biāo)準(zhǔn)也不太一樣，造就了難以統(tǒng)一的判斷。下面我大概羅列一下常用的瀏覽器品牌和在什么情況下使用瀏覽器運(yùn)行環(huán)境判斷。瀏覽器相關(guān)統(tǒng)計(jì)數(shù)據(jù)可以參考這里。

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

  • Google Chrome：Windows、OSX、Linux、Android、iOS

  • Apple Safari：OSX、iOS

  • Mozilla Firefox：Windows、OSX、Linux、Android、iOS

  • ASA Opera：Windows、OSX、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)了

順便吐槽一下這個(gè)不要臉的紅芯瀏覽器，明明就是基于Chromium進(jìn)行二次開(kāi)發(fā)再套多一層外殼，還非得說(shuō)自己開(kāi)發(fā)的瀏覽器是世界第五大瀏覽器，偷吃不抹嘴，還是被眼尖的網(wǎng)友發(fā)現(xiàn)了。。。。

使用場(chǎng)景

  • 判斷用戶瀏覽器是桌面端還是移動(dòng)端，顯示對(duì)應(yīng)的主題樣式

  • 判斷用戶瀏覽器是Android端還是iOS端，跳轉(zhuǎn)到對(duì)應(yīng)的App下載鏈接

  • 判斷用戶瀏覽器是微信端還是H5端，調(diào)用微信分享或當(dāng)前瀏覽器分享

  • 獲取用戶瀏覽器的內(nèi)核和載體，用于統(tǒng)計(jì)用戶設(shè)備平臺(tái)分布區(qū)間

  • 獲取用戶瀏覽器的載體版本，用于提示更新信息

  • 其實(shí)還有很多使用場(chǎng)景，就不一一舉例了

原理

針對(duì)處理一個(gè)這樣的使用場(chǎng)景，其實(shí)有一個(gè)比較專業(yè)的名字，叫做瀏覽器指紋。我們上面談到的需求也只是瀏覽器指紋方案里面的一小部分，而我們需要使用到的瀏覽器指紋就是UserAgent。

這個(gè)UserAgent是何方神圣呢，中文翻譯過(guò)來(lái)就是用戶代理。引用百度的定義，就是一個(gè)特殊字符串頭，使得服務(wù)器能夠識(shí)別客戶使用的操作系統(tǒng)及版本、CPU類型、瀏覽器載體及版本、瀏覽器渲染引擎、瀏覽器語(yǔ)言、瀏覽器插件等。而這些信息也足夠我們?nèi)ヅ袛酁g覽器運(yùn)行環(huán)境了。

準(zhǔn)備

目前網(wǎng)上很多解決方法都只是針對(duì)系統(tǒng)是否是桌面端還是移動(dòng)端，Android端還是iOS端，部分瀏覽器載體的判斷和獲取等等，沒(méi)有一個(gè)比較完美或者終極的解決方案。

因此我用了很多測(cè)試平臺(tái)整理出一個(gè)比較全面的解決方案。這個(gè)方案包含瀏覽器系統(tǒng)及版本、瀏覽器平臺(tái)、瀏覽器內(nèi)核及版本、瀏覽器載體及版本、瀏覽器外殼及版本。

而此方案也是基于navigator.userAgent獲取相關(guān)瀏覽器信息(如下)，再通過(guò)系統(tǒng)、平臺(tái)、內(nèi)核、載體、外殼的特有字段進(jìn)行歸類統(tǒng)一，整理出一個(gè)完整的瀏覽器運(yùn)行環(huán)境。

const ua = navigator.userAgent.toLowerCase();

// 輸出
"Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

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

  • 瀏覽器系統(tǒng)：所運(yùn)行的操作系統(tǒng)，包含Windows、OSX、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, ".");

方案

上述準(zhǔn)備工作完成后，我們就按照權(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"; // window系統(tǒng)
} else if (testUa(/macintosh|macintel/ig)) {
 system = "osx"; // osx系統(tǒng)
} else if (testUa(/x11/ig)) {
 system = "linux"; // linux系統(tǒng)
} else if (testUa(/android|adr/ig)) {
 system = "android"; // android系統(tǒng)
} else if (testUa(/ios|iphone|ipad|ipod|iwatch/ig)) {
 system = "ios"; // ios系統(tǒng)
}

// 系統(tǒng)版本
let systemVs = "unknown";
if (system === "windows") {
 if (testUa(/windows 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 === "osx") {
 systemVs = testVs(/os x [\d._]+/ig);
} else if (system === "android") {
 systemVs = testVs(/android [\d._]+/ig);
} else if (system === "ios") {
 systemVs = testVs(/os [\d._]+/ig);
}

平臺(tái)

let platform = "unknow";
if (system === "windows" || system === "osx" || system === "linux") {
 platform = "desktop"; // 桌面端
} else if (system === "android" || system === "ios" || testUa(/mobile/ig)) {
 platform = "mobile"; // 移動(dòng)端
}

內(nèi)核+載體

let engine = "unknow";
let supporter = "unknow";
if (testUa(/applewebkit/ig) && testUa(/safari/ig)) {
 engine = "webkit"; // webkit內(nèi)核
 if (testUa(/edge/ig)) {
  supporter = "edge"; // edge瀏覽器
 } else if (testUa(/opr/ig)) {
  supporter = "opera"; // 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"; // iexplore瀏覽器
}

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

// 內(nèi)核版本
let engineVs = "unknow";
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 = "unknow";
if (supporter === "chrome") {
 supporterVs = testVs(/chrome\/[\d.]+/ig);
} else if (supporter === "safari") {
 supporterVs = testVs(/version\/[\d.]+/ig);
} else if (supporter === "firefox") {
 supporterVs = testVs(/firefox\/[\d.]+/ig);
} else if (supporter === "opera") {
 supporterVs = testVs(/opr\/[\d.]+/ig);
} else if (supporter === "iexplore") {
 supporterVs = testVs(/(msie [\d.]+)|(rv:[\d.]+)/ig);
} else if (supporter === "edge") {
 supporterVs = testVs(/edge\/[\d.]+/ig);
}

外殼+外殼版本

let shell = "none";
let shellVs = "unknow";
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);
}

終極合體

根據(jù)以上的條件判斷獲得的變量如下，我們可以把它們合并成一個(gè)對(duì)象輸出。這樣就可以輸出一個(gè)清晰的瀏覽器運(yùn)行環(huán)境，后面想干嘛就干嘛了，多方便。

本文重點(diǎn)探究方案的可行性，沒(méi)有過(guò)多考慮到代碼的優(yōu)化，所以條件判斷使用得有些多，如果有什么方法能優(yōu)化下代碼，減少條件判斷，可以在下方評(píng)論提個(gè)建議喲。

  • system：系統(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、shellVs
 return Object.assign({
  engine, // webkit gecko presto trident
  engineVs,
  platform, // desktop mobile
  supporter, // chrome safari firefox opera iexplore edge
  supporterVs,
  system, // windows osx linux android ios
  systemVs
 }, shell === "none" ? {} : {
  shell, // wechat qq uc 2345 sougou liebao maxthon baidu
  shellVs
 });
}

在控制臺(tái)執(zhí)行BrowserType()，該有的都出來(lái)了，哈哈！源碼詳情請(qǐng)戳這里，喜歡的可以點(diǎn)個(gè)贊支持下，謝謝。

JavaScript怎么判斷瀏覽器運(yùn)行環(huán)境

感謝各位的閱讀！關(guān)于“JavaScript怎么判斷瀏覽器運(yùn)行環(huán)境”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前文章：JavaScript怎么判斷瀏覽器運(yùn)行環(huán)境
文章鏈接：http://chinadenli.net/article40/piooeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化