js判断浏览器环境、内核、载体、外壳、操作系统等

我们部署在Web服务器上的前端应用，既可以用PC浏览器访问，也可以用手机浏览器访问。项目中很多时候会遇到判断浏览器环境的问题，比如说微信浏览器/APP环境，ios/安卓环境；浏览器是JavaScript的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我们的业务逻辑。

1.使用场景

判断用户浏览器是桌面端还是移动端，显示对应的主题样式
判断用户浏览器是Android端还是iOS端，跳转到对应的App下载链接
判断用户浏览器是微信端还是H5端，调用微信分享或当前浏览器分享
获取用户浏览器的内核和载体，用于统计用户设备平台分布区间
获取用户浏览器的载体版本，用于提示更新信息
其实还有很多使用场景，就不一一举例了

2.原理

针对处理一个这样的使用场景，其实有一个比较专业的名字，叫做浏览器指纹。我们上面谈到的需求也只是浏览器指纹方案里面的一小部分，而我们需要使用到的浏览器指纹就是 UserAgent。

中文翻译过来就是用户代理。引用百度的定义：一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器载体及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。而这些信息也足够我们去判断浏览器运行环境了。

3.浏览器信息：权重按照以下降序排列

浏览器系统：所运行的操作系统，包含 Windows、OSX、Linux、Android、iOS
浏览器平台：所运行的设备平台，包含 Desktop桌面端、Mobile移动端
浏览器内核：浏览器渲染引擎，包含 Webkit、Gecko、Presto、Trident
浏览器载体：五大浏览器品牌，包含 Chrome、Safari、Firefox、Opera、Iexplore/Edge
浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌

4. 判断方法

4.1 先提取 userAgent：

const ua = global.navigator.userAgent.toLowerCase();// 输出mozilla/5.0 (macintosh; intel mac os x 10_15_4) applewebkit/537.36 (khtml, like gecko) chrome/84.0.4147.105 safari/537.36

获取UserAgent是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段

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

获取UserAgent对应字段的版本

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

4.2 方案

上述准备工作完成后，我们就按照权重(系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本)根据系统、平台、内核、载体、外壳的特有字段来归类统一浏览器运行环境。

4.2.1 系统+系统版本

// 系统
let system = "unknown";
if (testUa(/windows|win32|win64|wow32|wow64/ig)) {system = "windows"; // window系统
} else if (testUa(/macintosh|macintel/ig)) {system = "osx"; // osx系统
} else if (testUa(/x11/ig)) {system = "linux"; // linux系统
} else if (testUa(/android|adr/ig)) {system = "android"; // android系统
} else if (testUa(/ios|iphone|ipad|ipod|iwatch/ig)) {system = "ios"; // ios系统
}// 系统版本
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);
}

4.2.2 平台

let platform = "unknow";
if (system === "windows" || system === "osx" || system === "linux") {platform = "desktop"; // 桌面端
} else if (system === "android" || system === "ios" || testUa(/mobile/ig)) {platform = "mobile"; // 移动端
}// 实际应用：判断浏览器函数
function isMobile() {if (testUa(/(phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowser|juc|fennec|wosbrowser|browserng|webos|symbian|windows phone)/ig)) {return true // 移动端} else {return false // PC端}
}

4.2.3 内核+载体

let engine = "unknow";
let supporter = "unknow";
if (testUa(/applewebkit/ig) && testUa(/safari/ig)) {engine = "webkit"; // webkit内核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内核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"; // iexplore浏览器
}

4.2.4 内核版本+载体版本

// 内核版本
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);
}

4.2.5 外壳+外壳版本

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);
}

4.2.6 判断是否为微信客户端

const isWechart = function () {let rst = trueconst ua = navigator.userAgent.toLowerCase()if (ua.match(/(phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowser|juc|fennec|wosbrowser|browserng|webos|symbian|windows phone)/i)) {if (!(ua.match(/MicroMessenger/i) === "micromessenger")) {rst = false}} else {rst = false}return rst
}

4.2.7 判断微信浏览器是PC端还是手机端，以及手机端是微信浏览器还是非微信浏览器

//平台、设备和操作系统
var system = {win: false,mac: false,xll: false,ipad: false
}
//检测平台
var p = navigator.platform
system.win = p.indexOf("Win") === 0
system.mac = p.indexOf("Mac") === 0
system.x11 = (p === "X11") || (p.indexOf("Linux") === 0)
system.ipad = (navigator.userAgent.match(/iPad/i) !== null)
//跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面
if (system.win || system.mac || system.xll || system.ipad) {alert("在PC端上打开的")
} else {var ua = navigator.userAgent.toLowerCase()if (ua.match(/MicroMessenger/i) === "micromessenger") {alert("在手机端微信上打开的")} else {alert("在手机上非微信上打开的")}
}

4.2.8 终极合体

根据以上的条件判断获得的变量如下，我们可以把它们合并成一个对象输出。这样就可以输出一个清晰的浏览器运行环境，后面想干嘛就干嘛了，多方便。

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) + "").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 osx linux android iossystemVs}, shell === "none" ? {} : {shell, // wechat qq uc 2345 sougou liebao maxthon baidushellVs});}

5.参考文章：

js判断浏览器的环境（pc端，移动端，还是微信浏览器）
JavaScript判断浏览器运行环境的详细方法

js判断浏览器环境、内核、载体、外壳、操作系统等相关推荐

android浏览器内核检测,一段非常简单的js判断浏览器的内核
大家应该还记得JavaScript行内样式怎么写吧?(看来我是废话了!) 在前端开发过程中,有时我们需要判断浏览器的内核前缀,对不同的浏览器做出不同的处理,因此我们可以这么做. alert(eleme ...
js判断浏览器类型，判断ie内核，webkit
js判断浏览器类型 <script>function _mime(option, value) {const mimeTypes = navigator.mimeTypes;for (co ...
PHP判断浏览器内核过低,js判断浏览器版本以及浏览器内核的方法
本文实例讲述了js判断浏览器版本以及浏览器内核的方法.分享给大家供大家参考.具体实现方法如下: js判断是否移动端及浏览器内核 var browser = { versions: function() ...
JS 判断浏览器版本
JS 判断浏览器版本 1.JS 区分各个浏览器(方法一) var browser={versions:function(){var u = navigator.userAgent, app = nav ...
js判断浏览器及终端
js判断浏览器及终端判断浏览器判断ie为某个版本鉴别PC及移动端判断浏览器判断浏览器时我们需要用到navigator.userAgent navigator是一个对象,他包含了有关浏览器的信 ...
js判断运行环境是手机还是 PC
js判断运行环境是手机还是 PC function IsPC() {var userAgentInfo = navigator.userAgent; // 包含有关浏览器的信息// 非手机端var A ...
js判断浏览器是否安装或启用了flash的方法总结
目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法在传统浏览器,可以使用windo ...
js判断浏览器是否为IE
js判断浏览器是否为IE的方法. function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var ...
js判断浏览器信息大全
js判断浏览器信息大全,详情如下. 可以直接引入js文件. /** 描述:判断浏览器信息* 编写:LittleQiang_w* 日期:2016.1.5* 版本:V1.1*///判断当前浏览类型 fun ...