javascript判断浏览器当前运行环境

认识浏览器

五大国际浏览器品牌：按照全球使用率排序

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进行开发

微信浏览器
QQ浏览器
UC浏览器
2345浏览器
搜狗浏览器
猎豹浏览器
遨游浏览器
百度浏览器：百度在2019年04月30日宣布停止服务
其他浏览器：很多很多，数不清，我就不列出来了

实现功能

判断用户浏览器使用系统和版本
判断用户浏览器是桌面端还是移动端，显示对应的主题样式
判断浏览器是Android端还是iOS端，跳转到对应的app下载链接
判断用户浏览器的内核和在台用于统计用户设备平台分布区间
判断用户浏览器的载体版本，用与提示更新信息

浏览器信息：按权重降序排序

浏览器系统：所运行的操作系统，包含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) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");

方案

按照权重(系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本)根据系统、平台、内核、载体、外壳的特有字段来归类统一浏览器运行环境。

系统+系统版本

//系统
let system = "unknown";
if (testUa(/windows|win32|win64|wow32|wow64/ig)) {system = "windows"; //Windows系统
} else if (testUa(/macintosh|macintel/ig)) {system = "macos"; //Macos系统
} else if (testUa(/x11/ig)) {system = "linux"; //Linux系统
} else if (testUa(/android|adr/ig)) {system = "andriod"; //Android 系统
} else if (testUa(/ios|iphone|ipad|iwatch/ig)) {system = "ios"; // iOS系统
}
//系统版本
let systemVs = "unknown";
if (system ==="windows") { //windos版本if (testUa(/windos 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==="macos"){systemVs=testVs(/os x [\d._]+/ig);
}else if(system==="andriod"){systemVs=testVs(/andriod [\d._]+/ig);
}else if(system==="ios"){systemVs=testVs(/os [\d._]+/ig);
}

平台

//平台
let platform = "unknow";
if (system === "windows" || system === "macos" || system === "linux") {platform = "desktop"; //桌面端
} else if (system === "andriod" || system === "ios" || testUa(/mobile/ig)) {platform = "mobile"; //移动端
}

内核+载体

//内核+载体
let engine = "unknown";
let supporter = "unknown";
if (testUa(/applewebkit/ig) && testUa(/safsri/ig)) {engine = "webkit"; //webkit内核if (testUa(/edge/ig)) {supporter = "edge"; //Edge浏览器} else if (testUa(/opr/ig)) {supporter = "opr"; //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"; //IE 浏览器
}

内核版本+载体版本

//内核版本
let engineVs="unknown";
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="unknown";
if(supporter==="chrome"){supporterVs=testVs(/chrome\/[\d.]+/ig)
}else if(supporter==="safari"){supporterVs = testVs(/verison\/[\d.]+/ig)}else if (supporter === "firefox") {supporterVs = testVs(/firefox\/[\d.]+/ig)} else if (supporter === "opera") {supporterVs = testVs(/opr\/[\d.]+/ig)} else if (supporter === "iexploer") {supporterVs = testVs(/(msie\/[\d.]+)|(rv:[\d.]+)/ig)} else if (supporter === "edge") {supporterVs = testVs(/edge\/[\d.]+/ig)}

外壳+外壳版本

//外壳+外壳版本
let shell="none";//外壳
let shellVs="unknown";
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);
}

构造函数输出对象

将所有判断条件合并成一个对象输出，代码未优化。

ystem：系统
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 macos linux android iossystemVs}, shell === "none" ? {} : {shell, // wechat qq uc 2345 sougou liebao maxthon baidushellVs});
}

javascript判断浏览器当前运行环境相关推荐

如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）
我们部署在某些云平台或者Web服务器上的前端应用,既可以用PC端浏览器访问,也可以用手机上的浏览器访问. 在前端应用里,有时候我们需要根据运行环境的不同做出对应处理.比如下面这段逻辑,如果判断出应用当 ...
JavaScript判断浏览器类型及版本
JavaScript判断浏览器类型及版本你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器. 几天前,浏览器家族有 ...
JavaScript判断浏览器类型及版本(新增谷歌的Chrome)
来源:http://blog.tripdev.com/?tid=164 JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript ...
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
html判断是否在微信里打开,JavaScript判断浏览器内核，微信打开自动提示在浏览器打开...
微信会屏蔽 URL 自定义的 scheme ,导致无法跳转手机中的浏览器.网上有一些工具类网站可以实现直接跳转浏览器,之后有机会我会整理一下.我们今天只讨论通过 JavaScript 判断是否在微信浏 ...
javascript判断浏览器和终端类型，js如何区分手机、电脑终端和浏览器
判断浏览器类型复制代码代码如下: if ( window.sidebar && "object" == typeof( window.sidebar ) & ...
JavaScript判断浏览器Flash Player信息
今天研究了点Flex技术,做了一个小的Demo,在测试时发现经常报错,网上一查发现是浏览器Flash Player版本较低造成(需要10及其以上的版本)的,对此总结了一下借助JavaScript脚本判 ...
JavaScript判断浏览器内核，微信打开自动提示在浏览器打开
微信会屏蔽 URL 自定义的 scheme ,导致无法跳转手机中的浏览器.网上有一些工具类网站可以实现直接跳转浏览器,之后有机会我会整理一下.我们今天只讨论通过 JavaScript 判断是否在微信浏 ...
JavaScript判断浏览器 Browser detect
The script Copy this script into your JavaScript files. It works immediately, and you can query thre ...