用JavaScript判断浏览器运行环境的详细方法

时间：2021-08-22 来源：互联网编辑：宝哥软件园浏览：次

前言

当你看到标题时，你会记得这个需求可以用在很多项目中。我们部署在网络服务器上的前端应用程序可以被个人电脑浏览器和移动浏览器访问。除了智能设备的普及，我们甚至可以在车载系统、可穿戴设备和电视平台上访问它们。

设备的多样性让用户无处不在，有时候我们需要根据不同的浏览器运行环境来处理。浏览器是JavaScript的载体，我们可以从浏览器中获取相关信息来进一步处理我们的业务逻辑。

但是浏览器的品牌很多，有些浏览器使用的标准不一样，很难统一判断。下面，我将列出常用的浏览器品牌，并判断何时使用浏览器运行环境。这里可以参考浏览器相关的统计数据。

前五大国际浏览器品牌：全球使用率降序排列

谷歌Chrome:Windows、OSX、Linux、安卓、iOS苹果Safari:OSX、iOS Mozilla Firefox:Windows、OSX、Linux、安卓、iOS ASA Opera:Windows、OSX、Linux、安卓、iOS微软Internet Explorer或微软Edge:Windows国内常见浏览器品牌：按国内使用率降序排列，一般是基于开源项目Chrome开发的

微信浏览器QQ浏览器UC浏览器2345浏览器搜狗浏览器猎豹浏览器旅行浏览器百度浏览器：百度在2019年4月30日宣布停止服务其他浏览器：很多很多无数，我就不一一列举了。顺便吐槽一下这个无耻的红心浏览器。显然是以Chromium为基础进行二次开发然后再套一层壳。还是要说我开发的浏览器是世界第五大浏览器，被眼尖的网友发现了。

使用场景

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

为了应对这样的使用场景，其实还有一个更专业的名字，叫做浏览器指纹。上面提到的需求只是浏览器指纹方案的一小部分，我们需要使用的浏览器指纹是UserAgent。

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

准备好

目前很多线上解决方案只是针对系统是桌面还是移动，安卓还是iOS，对一些浏览器载体的判断和收购等。也没有完美或终极的解决方案。

因此，我使用了许多测试平台来整理更全面的解决方案。该方案包括浏览器系统及版本、浏览器平台、浏览器内核及版本、浏览器载体及版本、浏览器外壳及版本。

而这个方案也是基于navigator.userAgent来获取相关的浏览器信息(如下)，然后通过系统、平台、内核、载体和外壳等独特的领域进行分类统一，梳理出一个完整的浏览器运行环境。

const ua=navigator . user agent . tolowercase()；//输出‘Mozilla/5.0(iPhone；Cpu iphone OS 11 _ 0喜欢MAC OS x)苹果WebKit/604.1.38 (khtml，喜欢gecko)版本/11.0 mobile/15a372 safari/604.1 '浏览器信息：权重按以下降序排列

浏览器系统：所运行的操作系统，包含Windows、OSX、Linux、安卓、iOS浏览器平台：所运行的设备平台，包含桌面桌面端、手机移动端浏览器内核：浏览器渲染引擎，包含韦伯基特、壁虎、普雷斯托、三叉戟浏览器载体：五大浏览器品牌，包含Chrome、Safari、火狐、歌剧、探索/边缘浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌获取用户代理是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段

const Testua=regexp=regexp。测试(ua)；获取用户代理对应字段的版本

const testVs=regexp=(ua。match(regexp)' ').replace(/[^0-9|_.]/ig ' ').替换(/_/ig，'.');方案

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

系统系统版本

//系统让系统='未知；if(Testua(/windows | win32 | win 64 | wow 32 | wow 64/ig)){ system=' windows '；//窗口系统} 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 '；//安卓系统} else if(Testua(/IOs | iphone | ipad | ipod | iwatch/ig)){ system=' IOs '；//ios系统}//系统版本让systemVs='未知；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 '){ SYStemV=TestV(/OS[\ d . _]/ig)；}平台

让platform=' unknowif '(system==' windows ' | | system==' OSX ' | | system==' Linux '){ platform=' desktop '；//桌面端} else if(system=' Android ' | | system=' IOs ' | | Testua(/mobile/ig)){ platform=' mobile '；//移动端}内核载体

让引擎='未知'让支持者=' unknown if(TeStUa(/applebekit/ig)TeStUa(/safari/ig)){ engine=' web kit '；//webkit内核if(Testua(/edge/ig)){ supporter=' edge '；//边缘浏览器} else if(Testua(/opr/ig)){ supporter=' opera '；//歌剧浏览器} else if(Testua(/chrome/ig)){ supporter=' chrome '；//镀铬浏览器} else { supporter=' safari//safari浏览器} } else if(Testua(/gecko/ig)Testua(/Firefox/ig)){ engine=' gecko '；//壁虎内核支持者='火狐；//火狐浏览器} else if(Testua(/presto/ig)){ engine=' presto '；//presto内核支持者=' opera//歌剧浏览器} else if(Testua(/trident | compatible | msie/ig)){ engine=' trident '；//三叉戟内核支持者=' iexplore//iexplore浏览器}内核版本载体版本

//内核版本让engine vs=' unknown if(engine==' web kit '){ engine vs=testVs(/applebwebkit \/[\ d .]/ig)；} else if(engine==' gecko '){ engine vs=testVs(/gecko \/[\ d .]/ig)；} else if(engine==' presto '){ engine vs=testVs(/presto \/[\ d .]/ig)；} else if(engine==' trident '){ engine vs=testVs(/trident \/[\ d .]/ig)；}//载体版本让supporterVs=' unknown 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 '){ supporter vs=testVs(/edge \/[\ d .]/ig)；}外壳外壳版本

让shell=“无”让shellVs=' unknowif(Testua(/micro messenger/ig)){ shell='微信；//微信浏览器shellVs=testVs(/micro messenger \/[\ d .]/ig)；} else if(Testua(/QQ browser/ig)){ shell=' QQ '；//QQ浏览器shellVs=testVs(/QQ browser \/[\ d .]/ig)；} else if(Testua(/ubrowser/ig)){ shell=' UC '；//UC浏览器shellVs=testVs(/ubrowser \/[\ d .]/ig)；} else if(Testua(/2345 explorer/ig)){ shell=' 2345 '；//2345浏览器shellVs=testVs(/2345 explorer \/[\ d .]/ig)；} else if(Testua(/metsar/ig)){ shell=' sou Gou '；//搜狗浏览器} 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)；}终极合体

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

本文重点探究方案的可行性，没有过多考虑到代码的优化，所以条件判断使用得有些多，如果有什么方法能优化下代码，减少条件判断，可以在下方评论提个建议哟。

系统：系统系统Vs:系统版本平台：平台发动机：内核发动机：内核版本支持者：载体支持服务器：载体版本外壳：外壳炮弹：外壳版本函数browser type(){ const ua=navigator。用户代理。tolowercase()；const Testua=regexp=regexp。测试(ua)；const testVs=regexp=(ua。match(regexp)' ').replace(/[^0-9|_.]/ig ' ').替换(/_/ig，'.');//接上以上如果.其他条件判断//.//获取到系统、系统Vs、平台、引擎、支持服务器、外壳、外壳返回对象。分配({ engine，//WebKit gecko presto trident engineVs，platform，//桌面移动支持者，//chrome safari Firefox opera iexplore edge supporter vs，system，//windows OSX Linux安卓IOs systemVs }，shell===' none '？{} : { shell，//微信qq uc 2345搜狗猎豹傲游百度shellVs })；}在控制台执行BrowserType()，该有的都出来了，哈哈！源码详情请戳这里，喜欢的可以点个赞支持下，谢谢。