JavaScript怎么判断浏览器运行环境(javascript,浏览器,web开发)

前言

看到标题，大家就能想起这个需求在很多项目上都能用到。我们部署在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浏览器

• 搜狗浏览器

• 猎豹浏览器

• 遨游浏览器

• 百度浏览器：百度在2023年04月30日宣布停止服务

• 其他浏览器：很多很多，数不清，我就不列出来了

顺便吐槽一下这个不要脸的红芯浏览器，明明就是基于Chromium进行二次开发再套多一层外壳，还非得说自己开发的浏览器是世界第五大浏览器，偷吃不抹嘴，还是被眼尖的网友发现了。。。。

使用场景

• 判断用户浏览器是桌面端还是移动端，显示对应的主题样式

• 判断用户浏览器是Android端还是iOS端，跳转到对应的App下载链接

• 判断用户浏览器是微信端还是H5端，调用微信分享或当前浏览器分享

• 获取用户浏览器的内核和载体，用于统计用户设备平台分布区间

• 获取用户浏览器的载体版本，用于提示更新信息

• 其实还有很多使用场景，就不一一举例了

原理

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

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

准备

目前网上很多解决方法都只是针对系统是否是桌面端还是移动端，Android端还是iOS端，部分浏览器载体的判断和获取等等，没有一个比较完美或者终极的解决方案。

因此我用了很多测试平台整理出一个比较全面的解决方案。这个方案包含浏览器系统及版本、浏览器平台、浏览器内核及版本、浏览器载体及版本、浏览器外壳及版本。

而此方案也是基于navigator.userAgent获取相关浏览器信息(如下)，再通过系统、平台、内核、载体、外壳的特有字段进行归类统一，整理出一个完整的浏览器运行环境。

constua=navigator.userAgent.toLowerCase();//输出"Mozilla/5.0(iPhone;CPUiPhoneOS11_0likeMacOSX)AppleWebKit/604.1.38(KHTML,likeGecko)Version/11.0Mobile/15A372Safari/604.1"

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

• 浏览器系统：所运行的操作系统，包含Windows、OSX、Linux、Android、iOS

• 浏览器平台：所运行的设备平台，包含Desktop桌面端、Mobile移动端

• 浏览器内核：浏览器渲染引擎，包含Webkit、Gecko、Presto、Trident

• 浏览器载体：五大浏览器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge

• 浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌

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

consttestUa=regexp=>regexp.test(ua);

获取UserAgent对应字段的版本

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

方案

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

系统+系统版本

//系统letsystem="unknown";if(testUa(/windows|win32|win64|wow32|wow64/ig)){system="windows";//window系统}elseif(testUa(/macintosh|macintel/ig)){system="osx";//osx系统}elseif(testUa(/x11/ig)){system="linux";//linux系统}elseif(testUa(/android|adr/ig)){system="android";//android系统}elseif(testUa(/ios|iphone|ipad|ipod|iwatch/ig)){system="ios";//ios系统}//系统版本letsystemVs="unknown";if(system==="windows"){if(testUa(/windowsnt5.0|windows2000/ig)){systemVs="2000";}elseif(testUa(/windowsnt5.1|windowsxp/ig)){systemVs="xp";}elseif(testUa(/windowsnt5.2|windows2003/ig)){systemVs="2003";}elseif(testUa(/windowsnt6.0|windowsvista/ig)){systemVs="vista";}elseif(testUa(/windowsnt6.1|windows7/ig)){systemVs="7";}elseif(testUa(/windowsnt6.2|windows8/ig)){systemVs="8";}elseif(testUa(/windowsnt6.3|windows8.1/ig)){systemVs="8.1";}elseif(testUa(/windowsnt10.0|windows10/ig)){systemVs="10";}}elseif(system==="osx"){systemVs=testVs(/osx[\d._]+/ig);}elseif(system==="android"){systemVs=testVs(/android[\d._]+/ig);}elseif(system==="ios"){systemVs=testVs(/os[\d._]+/ig);}

平台

letplatform="unknow";if(system==="windows"||system==="osx"||system==="linux"){platform="desktop";//桌面端}elseif(system==="android"||system==="ios"||testUa(/mobile/ig)){platform="mobile";//移动端}

内核+载体

letengine="unknow";letsupporter="unknow";if(testUa(/applewebkit/ig)&&testUa(/safari/ig)){engine="webkit";//webkit内核if(testUa(/edge/ig)){supporter="edge";//edge浏览器}elseif(testUa(/opr/ig)){supporter="opera";//opera浏览器}elseif(testUa(/chrome/ig)){supporter="chrome";//chrome浏览器}else{supporter="safari";//safari浏览器}}elseif(testUa(/gecko/ig)&&testUa(/firefox/ig)){engine="gecko";//gecko内核supporter="firefox";//firefox浏览器}elseif(testUa(/presto/ig)){engine="presto";//presto内核supporter="opera";//opera浏览器}elseif(testUa(/trident|compatible|msie/ig)){engine="trident";//trident内核supporter="iexplore";//iexplore浏览器}

内核版本+载体版本

//内核版本letengineVs="unknow";if(engine==="webkit"){engineVs=testVs(/applewebkit\/[\d.]+/ig);}elseif(engine==="gecko"){engineVs=testVs(/gecko\/[\d.]+/ig);}elseif(engine==="presto"){engineVs=testVs(/presto\/[\d.]+/ig);}elseif(engine==="trident"){engineVs=testVs(/trident\/[\d.]+/ig);}//载体版本letsupporterVs="unknow";if(supporter==="chrome"){supporterVs=testVs(/chrome\/[\d.]+/ig);}elseif(supporter==="safari"){supporterVs=testVs(/version\/[\d.]+/ig);}elseif(supporter==="firefox"){supporterVs=testVs(/firefox\/[\d.]+/ig);}elseif(supporter==="opera"){supporterVs=testVs(/opr\/[\d.]+/ig);}elseif(supporter==="iexplore"){supporterVs=testVs(/(msie[\d.]+)|(rv:[\d.]+)/ig);}elseif(supporter==="edge"){supporterVs=testVs(/edge\/[\d.]+/ig);}

外壳+外壳版本

letshell="none";letshellVs="unknow";if(testUa(/micromessenger/ig)){shell="wechat";//微信浏览器shellVs=testVs(/micromessenger\/[\d.]+/ig);}elseif(testUa(/qqbrowser/ig)){shell="qq";//QQ浏览器shellVs=testVs(/qqbrowser\/[\d.]+/ig);}elseif(testUa(/ubrowser/ig)){shell="uc";//UC浏览器shellVs=testVs(/ubrowser\/[\d.]+/ig);}elseif(testUa(/2345explorer/ig)){shell="2345";//2345浏览器shellVs=testVs(/2345explorer\/[\d.]+/ig);}elseif(testUa(/metasr/ig)){shell="sougou";//搜狗浏览器}elseif(testUa(/lbbrowser/ig)){shell="liebao";//猎豹浏览器}elseif(testUa(/maxthon/ig)){shell="maxthon";//遨游浏览器shellVs=testVs(/maxthon\/[\d.]+/ig);}elseif(testUa(/bidubrowser/ig)){shell="baidu";//百度浏览器shellVs=testVs(/bidubrowser[\d.]+/ig);}

终极合体

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

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

• system：系统

• systemVs：系统版本

• platform：平台

• engine：内核

• engineVs：内核版本

• supporter：载体

• supporterVs：载体版本

• shell：外壳

• shellVs：外壳版本

functionBrowserType(){constua=navigator.userAgent.toLowerCase();consttestUa=regexp=>regexp.test(ua);consttestVs=regexp=>(ua.match(regexp)+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//接上以上if...else条件判断//......//获取到system、systemVs、platform、engine、engineVs、supporter、supporterVs、shell、shellVsreturnObject.assign({engine,//webkitgeckoprestotridentengineVs,platform,//desktopmobilesupporter,//chromesafarifirefoxoperaiexploreedgesupporterVs,system,//windowsosxlinuxandroidiossystemVs},shell==="none"?{}:{shell,//wechatqquc2345sougouliebaomaxthonbaidushellVs});}

在控制台执行BrowserType()，该有的都出来了，哈哈！源码详情请戳这里，喜欢的可以点个赞支持下，谢谢。