JavaScript判断浏览器运⾏环境的详细⽅法
前⾔
看到标题，⼤家就能想起这个需求在很多项⽬上都能⽤到。我们部署在Web服务器上的前端应⽤，既可以⽤PC浏览器访问，也可以⽤⼿机浏览器访问，再加上现在智能设备的推⼴，我们甚⾄能在车载系统、穿戴设备和电视平台上访问。
设备的多样化让⽤户⽆处不在，有时候我们需要根据不同的浏览器运⾏环境做出对应的处理。浏览器是JavaScript的承载体，我们可以从浏览器上获取相关的信息，来进⼀步处理我们的业务逻辑。
然⽽浏览器品牌众多，有些浏览器使⽤的标准也不太⼀样，造就了难以统⼀的判断。下⾯我⼤概罗列⼀下常⽤的浏览器品牌和在什么情况下使⽤浏览器运⾏环境判断。浏览器相关统计数据可以参考。
国际五⼤浏览器品牌：按照全球使⽤率降序排列
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
国产常⽤浏览器品牌：按照国内使⽤率降序排列，普遍基于开源项⽬Chromium进⾏开发
浏览器
QQ浏览器
UC浏览器
2345浏览器
搜狗浏览器
猎豹浏览器
遨游浏览器
百度浏览器：百度在2019年04⽉30⽇宣布停⽌服务
其他浏览器：很多很多，数不清，我就不列出来了
顺便吐槽⼀下这个不要脸的红芯浏览器，明明就是基于Chromium进⾏⼆次开发再套多⼀层外壳，还⾮得说⾃⼰开发的浏览器是世界第五⼤浏览器，偷吃不抹嘴，还是被眼尖的⽹友发现了。。。。
使⽤场景
判断⽤户浏览器是桌⾯端还是移动端，显⽰对应的主题样式
判断⽤户浏览器是Android端还是iOS端，跳转到对应的App下载链接
判断⽤户浏览器是端还是H5端，调⽤分享或当前浏览器分享
获取⽤户浏览器的内核和载体，⽤于统计⽤户设备平台分布区间
获取⽤户浏览器的载体版本，⽤于提⽰更新信息
其实还有很多使⽤场景，就不⼀⼀举例了
原理
针对处理⼀个这样的使⽤场景，其实有⼀个⽐较专业的名字，叫做浏览器指纹。我们上⾯谈到的需求也只是浏览器指纹⽅案⾥⾯的⼀⼩部分，⽽我们需要使⽤到的浏览器指纹就是UserAgent。
这个UserAgent是何⽅神圣呢，中⽂翻译过来就是⽤户代理。引⽤百度的定义，就是⼀个特殊字符串头，使得服务器能够识别客户使⽤的操作系统及版本、CPU类型、浏览器载体及版本、浏览器渲染引擎、浏览器语⾔、浏览器插件等。⽽这些信息也⾜够我们去判断浏览器运⾏环境了。
准备
⽬前⽹上很多解决⽅法都只是针对系统是否是桌⾯端还是移动端，Android端还是iOS端，部分浏览器载体的判断和获取等等，没有⼀个⽐较完美或者终极的解决⽅案。
因此我⽤了很多测试平台整理出⼀个⽐较全⾯的解决⽅案。这个⽅案包含浏览器系统及版本、浏览器平台、浏览器内核及版本、浏览器载体及版本、浏览器外壳及版本。
⽽此⽅案也是基于navigator.userAgent获取相关浏览器信息(如下)，再通过系统、平台、内核、载体、外壳的特有字段进⾏归类统⼀，整理出⼀个完整的浏览器运⾏环境。
const ua = LowerCase();
// 输出
"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、OSX、Linux、Android、iOS
浏览器平台：所运⾏的设备平台，包含Desktop桌⾯端、Mobile移动端
浏览器内核：浏览器渲染引擎，包含Webkit、Gecko、Presto、Trident
浏览器载体：五⼤浏览器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge
浏览器外壳：基于五⼤浏览器品牌的内核进⾏开发，再套⼀层⾃研技术的外壳，如国内众多浏览器品牌
javascript是什么意思中文翻译获取UserAgent是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段
const testUa = regexp => st(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"; // 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);
}
平台
let platform = "unknow";
if (system === "windows" || system === "osx" || system === "linux") {
platform = "desktop"; // 桌⾯端
} else if (system === "android" || system === "ios" || testUa(/mobile/ig)) { platform = "mobile"; // 移动端
}
内核+载体
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浏览器
}
内核版本+载体版本
// 内核版本
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);
}
终极合体
根据以上的条件判断获得的变量如下，我们可以把它们合并成⼀个对象输出。这样就可以输出⼀个清晰的浏览器运⾏环境，后⾯想⼲嘛就⼲嘛了，多⽅便。
本⽂重点探究⽅案的可⾏性，没有过多考虑到代码的优化，所以条件判断使⽤得有些多，如果有什么⽅法能优化下代码，减少条件判断，可以在下⽅评论提个建议哟。
system：系统
systemVs：系统版本
platform：平台
engine：内核
engineVs：内核版本
supporter：载体
supporterVs：载体版本
shell：外壳
shellVs：外壳版本
function BrowserType() {
const ua = LowerCase();
const testUa = regexp => st(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
});
}
在控制台执⾏BrowserType()，该有的都出来了，哈哈！源码详情请戳，喜欢的可以点个赞⽀持下，谢谢。
结语
写到最后总结得差不多了，后续如果我想起还有哪些判断浏览器运⾏环境终极⽅案遗漏的，会继续在这篇⽂章上补全，同时也希望各位倔友对⽂章⾥的要点进⾏补充或者提出⾃⼰的见解。欢迎在下⽅进⾏评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时⽤得上。
好了，以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。