詳細判斷瀏覽器運行環境

時間  2021-08-12
標籤 html 前端 linux android ios git github web chrome shell 欄目 瀏覽器 简体版
原文   原文鏈接

做者：JowayYoung
倉庫：Github、CodePen
博客：官網、掘金、思否、知乎
公衆號：IQ前端
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權html

前言

看到標題，你們就能想起這個需求在不少項目上都能用到。咱們部署在Web服務器上的前端應用，既能夠用PC瀏覽器訪問，也能夠用手機瀏覽器訪問，再加上如今智能設備的推廣，咱們甚至能在車載系統、穿戴設備和電視平臺上訪問。前端

設備的多樣化讓用戶無處不在，有時候咱們須要根據不一樣的瀏覽器運行環境作出對應的處理。瀏覽器是JavaScript的承載體，咱們能夠從瀏覽器上獲取相關的信息，來進一步處理咱們的業務邏輯。linux

然而瀏覽器品牌衆多，有些瀏覽器使用的標準也不太同樣，造就了難以統一的判斷。下面我大概羅列一下經常使用的瀏覽器品牌和在什麼狀況下使用瀏覽器運行環境判斷。瀏覽器相關統計數據能夠參考這裏。android

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

  • 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進行開發git

  • 微信瀏覽器
  • QQ瀏覽器
  • UC瀏覽器
  • 360瀏覽器
  • 2345瀏覽器
  • 搜狗瀏覽器
  • 獵豹瀏覽器
  • 遨遊瀏覽器
  • 其餘瀏覽器：不少不少，數不清，我就不列出來了

順便吐槽一下這個不要臉的紅芯瀏覽器，明明就是基於Chromium進行二次開發再套多一層外殼，還非得說本身開發的瀏覽器是世界第五大瀏覽器，偷吃不抹嘴，仍是被眼尖的網友發現了。詳情請戳one、two。。。github

使用場景web

  • 判斷用戶瀏覽器是桌面端仍是移動端，顯示對應的主題樣式
  • 判斷用戶瀏覽器是Android端仍是iOS端，跳轉到對應的App下載連接
  • 判斷用戶瀏覽器是微信端仍是H5端，調用微信分享或當前瀏覽器分享
  • 獲取用戶瀏覽器的內核和載體，用於統計用戶設備平臺分佈區間
  • 獲取用戶瀏覽器的載體版本，用於提示更新信息
  • 其實還有不少使用場景，就不一一舉例了

原理

針對處理一個這樣的使用場景，其實有一個比較專業的名字，叫作瀏覽器指紋。咱們上面談到的需求也只是瀏覽器指紋方案裏面的一小部分，而咱們須要使用到的瀏覽器指紋就是UserAgent。chrome

這個UserAgent是何方神聖呢，中文翻譯過來就是用戶代理。引用百度的定義，就是一個特殊字符串頭，使得服務器可以識別客戶使用的操做系統及版本、CPU類型、瀏覽器載體及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。而這些信息也足夠咱們去判斷瀏覽器運行環境了。shell

準備

目前網上不少解決方法都只是針對系統是不是桌面端仍是移動端，Android端仍是iOS端，部分瀏覽器載體的判斷和獲取等等，沒有一個比較完美或者終極的解決方案。

所以我用了不少測試平臺整理出一個比較全面的解決方案。這個方案包含瀏覽器系統及版本、瀏覽器平臺、瀏覽器內核及版本、瀏覽器載體及版本、瀏覽器外殼及版本。

而此方案也是基於navigator.userAgent獲取相關瀏覽器信息(以下)，再經過系統、平臺、內核、載體、外殼的特有字段進行歸類統一，整理出一個完整的瀏覽器運行環境。

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"
複製代碼

瀏覽器信息：權重按照如下降序排列

  • 瀏覽器系統：所運行的操做系統，包含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).toString().replace(/[^0-9|_.]/g, "").replace(/_/g, ".");
複製代碼

方案

上述準備工做完成後，咱們就按照權重(系統 + 系統版本 > 平臺 > 內核 + 載體 + 內核版本 + 載體版本 > 外殼 + 外殼版本)根據系統、平臺、內核、載體、外殼的特有字段來歸類統一瀏覽器運行環境。

系統+系統版本

// 系統
let system = "unknow";
if (testUa(/windows|win32|win64|wow32|wow64/g)) {
    system = "windows"; // windows系統
} else if (testUa(/macintosh|macintel/g)) {
    system = "macos"; // macos系統
} else if (testUa(/x11/g)) {
    system = "linux"; // linux系統
} else if (testUa(/android|adr/g)) {
    system = "android"; // android系統
} else if (testUa(/ios|iphone|ipad|ipod|iwatch/g)) {
    system = "ios"; // ios系統
}

// 系統版本
let systemVs = "unknow";
if (system === "windows") {
    if (testUa(/windows nt 5.0|windows 2000/g)) {
        systemVs = "2000";
    } else if (testUa(/windows nt 5.1|windows xp/g)) {
        systemVs = "xp";
    } else if (testUa(/windows nt 5.2|windows 2003/g)) {
        systemVs = "2003";
    } else if (testUa(/windows nt 6.0|windows vista/g)) {
        systemVs = "vista";
    } else if (testUa(/windows nt 6.1|windows 7/g)) {
        systemVs = "7";
    } else if (testUa(/windows nt 6.2|windows 8/g)) {
        systemVs = "8";
    } else if (testUa(/windows nt 6.3|windows 8.1/g)) {
        systemVs = "8.1";
    } else if (testUa(/windows nt 10.0|windows 10/g)) {
        systemVs = "10";
    }
} else if (system === "macos") {
    systemVs = testVs(/os x [\d._]+/g);
} else if (system === "android") {
    systemVs = testVs(/android [\d._]+/g);
} else if (system === "ios") {
    systemVs = testVs(/os [\d._]+/g);
}
複製代碼

平臺

let platform = "unknow";
if (system === "windows" || system === "macos" || system === "linux") {
    platform = "desktop"; // 桌面端
} else if (system === "android" || system === "ios" || testUa(/mobile/g)) {
    platform = "mobile"; // 移動端
}
複製代碼

內核+載體

let engine = "unknow";
let supporter = "unknow";
if (testUa(/applewebkit/g)) {
    engine = "webkit"; // webkit內核
    if (testUa(/edge/g)) {
        supporter = "edge"; // edge瀏覽器
    } else if (testUa(/opr/g)) {
        supporter = "opera"; // opera瀏覽器
    } else if (testUa(/chrome/g)) {
        supporter = "chrome"; // chrome瀏覽器
    } else if (testUa(/safari/g)) {
        supporter = "safari"; // safari瀏覽器
    }
} else if (testUa(/gecko/g) && testUa(/firefox/g)) {
    engine = "gecko"; // gecko內核
    supporter = "firefox"; // firefox瀏覽器
} else if (testUa(/presto/g)) {
    engine = "presto"; // presto內核
    supporter = "opera"; // opera瀏覽器
} else if (testUa(/trident|compatible|msie/g)) {
    engine = "trident"; // trident內核
    supporter = "iexplore"; // iexplore瀏覽器
}
複製代碼

內核版本+載體版本

// 內核版本
let engineVs = "unknow";
if (engine === "webkit") {
    engineVs = testVs(/applewebkit\/[\d._]+/g);
} else if (engine === "gecko") {
    engineVs = testVs(/gecko\/[\d._]+/g);
} else if (engine === "presto") {
    engineVs = testVs(/presto\/[\d._]+/g);
} else if (engine === "trident") {
    engineVs = testVs(/trident\/[\d._]+/g);
}

// 載體版本
let supporterVs = "unknow";
if (supporter === "chrome") {
    supporterVs = testVs(/chrome\/[\d._]+/g);
} else if (supporter === "safari") {
    supporterVs = testVs(/version\/[\d._]+/g);
} else if (supporter === "firefox") {
    supporterVs = testVs(/firefox\/[\d._]+/g);
} else if (supporter === "opera") {
    supporterVs = testVs(/opr\/[\d._]+/g);
} else if (supporter === "iexplore") {
    supporterVs = testVs(/(msie [\d._]+)|(rv:[\d._]+)/g);
} else if (supporter === "edge") {
    supporterVs = testVs(/edge\/[\d._]+/g);
}
複製代碼

外殼+外殼版本

let shell = "none";
let shellVs = "unknow";
if (testUa(/micromessenger/g)) {
    shell = "wechat"; // 微信瀏覽器
    shellVs = testVs(/micromessenger\/[\d._]+/g);
} else if (testUa(/qqbrowser/g)) {
    shell = "qq"; // QQ瀏覽器
    shellVs = testVs(/qqbrowser\/[\d._]+/g);
} else if (testUa(/ucbrowser/g)) {
    shell = "uc"; // UC瀏覽器
    shellVs = testVs(/ucbrowser\/[\d._]+/g);
} else if (testUa(/qihu 360se/g)) {
    shell = "360"; // 360瀏覽器(無版本)
} else if (testUa(/2345explorer/g)) {
    shell = "2345"; // 2345瀏覽器
    shellVs = testVs(/2345explorer\/[\d._]+/g);
} else if (testUa(/metasr/g)) {
    shell = "sougou"; // 搜狗瀏覽器(無版本)
} else if (testUa(/lbbrowser/g)) {
    shell = "liebao"; // 獵豹瀏覽器(無版本)
} else if (testUa(/maxthon/g)) {
    shell = "maxthon"; // 遨遊瀏覽器
    shellVs = testVs(/maxthon\/[\d._]+/g);
}
複製代碼

終極合體

根據以上的條件判斷得到的變量以下，咱們能夠把它們合併成一個對象輸出。這樣就能夠輸出一個清晰的瀏覽器運行環境，後面想幹嗎就幹嗎了，多方便。

本文重點探究方案的可行性，沒有過多考慮到代碼的優化，因此條件判斷使用得有些多，若是有什麼方法能優化下代碼，減小條件判斷，能夠在下方評論提個建議喲。

  • system：系統
  • 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).toString().replace(/[^0-9|_.]/g, "").replace(/_/g, ".");
    // 接上以上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 macos linux android ios
        systemVs
    }, shell === "none" ? {} : {
        shell, // wechat qq uc 360 2345 sougou liebao maxthon
        shellVs
    });
}
複製代碼

在控制檯執行BrowserType()，該有的都出來了，哈哈！源碼詳情請戳這裏，喜歡的能夠點個贊支持下，謝謝。

瀏覽器類型

結語

❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創做更多高質量文章

關注公衆號IQ前端，一個專一於CSS/JS開發技巧的前端公衆號，更多前端小乾貨等着你喔

  • 關注後回覆資料免費領取學習資料
  • 關注後回覆進羣拉你進技術交流羣
  • 歡迎關注IQ前端，更多CSS/JS開發技巧只在公衆號推送

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程