前端项目中获取浏览器版本的方法

在我们的前端项目中,navigator.userAgent属性含有当前浏览器相关信息(比如版本号)。
所以当我们想要获取用户当前访问的浏览器的版本时直接去解析navigator.userAgent字段就中。

废话不多说,下面看封装的获取浏览器版本的函数:

function getBrowserVersion() {const userAgent = navigator.userAgent;let version = "";// 判断是否为 Chrome 浏览器if (/Chrome\/(\S+)/.test(userAgent)) {version = userAgent.match(/Chrome\/(\S+)/)[1];}// 判断是否为 Firefox 浏览器else if (/Firefox\/(\S+)/.test(userAgent)) {version = userAgent.match(/Firefox\/(\S+)/)[1];}// 判断是否为 Safari 浏览器else if (/Safari\/(\S+)/.test(userAgent)) {version = userAgent.match(/Version\/(\S+)/)[1];}// 判断是否为 Edge 浏览器else if (/Edg\/(\S+)/.test(userAgent)) {version = userAgent.match(/Edg\/(\S+)/)[1];}// 判断是否为 Internet Explorer 浏览器else if (/MSIE (\S+);/.test(userAgent)) {version = userAgent.match(/MSIE (\S+);/)[1];}return version;
}const browserVersion = getBrowserVersion();
console.log(browserVersion, 'version');

打印结果
在这里插入图片描述

上面的代码中,我们使用正则表达式匹配不同常用浏览器的版本,并返回了版本号。
下面就可以根据业务需要用在自己的项目中了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/247062.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Learning Normal Dynamics in Videos with Meta Prototype Network 论文阅读

文章信息:发表在cvpr2021 原文链接: Learning Normal Dynamics in Videos with Meta Prototype Network 摘要1.介绍2.相关工作3.方法3.1. Dynamic Prototype Unit3.2. 视频异常检测的目标函数3.3. 少样本视频异常检测中的元学习 4.实验5.总结代码复现&a…

STM32串口接收不定长数据(空闲中断+DMA)

玩转 STM32 单片机,肯定离不开串口。串口使用一个称为串行通信协议的协议来管理数据传输,该协议在数据传输期间控制数据流,包括数据位数、波特率、校验位和停止位等。由于串口简单易用,在各种产品交互中都有广泛应用。 但在使用串…

基础堆溢出原理与DWORD SHOOT实现

堆介绍 堆的数据结构与管理策略 程序员在使用堆时只需要做三件事情:申请一定大小的内存,使用内存,释放内存。 对于堆管理系统来说,响应程序的内存使用申请就意味着要在"杂乱"的堆区中"辨别"出哪些内存是正在…

Python的文件的读写操作【侯小啾Python基础领航计划 系列(二十七)】

Python_文件的读写操作【侯小啾Python基础领航计划 系列(二十七)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔…

实验案例二:多表查询

1、表联接类型。 表联接类型可以分为内联接.外联接和交叉联接等。 1.内联接。 内联接〈 inner join)是最常用的-一-种联接方式,只返回两个数据集合之间匹配关系的行,将位于两个互相交叉的数据集合中重叠部分以内的数…

“影响力”经济:抖音为什么更值得商家、达人长期深耕?

文|新熔财经 作者|叶一城 数亿的活跃用户,简单而自然的切入方式,快速、高频的执行效率,让抖音对电商界的冲击无可阻挡。 这背后,流量玩法登峰造极,是很多人的直接观感。 但实际上&#xff0…

原生横向滚动条 吸附 页面底部

效果图 /** 横向滚动条 吸附 页面底部 */ export class StickyHorizontalScrollBar {constructor(options {}) {const { el, style } optionsthis.createScrollbar(style)this.insertScrollbar(el)this.setScrollbarSize()this.onEvent()}/** 创建滚轴组件元素 */createS…

CCF CSP认证 历年题目自练Day51

此题又丑又长可以直接从题目分析(个人理解)部分看 题目 试题编号: 201812-3 试题名称: CIDR合并 时间限制: 1.0s 内存限制: 512.0MB 样例输入 2 1 2 样例输出 1.0.0.0/8 2.0.0.0/8 样例输入 2 10/9 10…

WEB渗透—反序列化(十一)

Web渗透—反序列化 课程学习分享(课程非本人制作,仅提供学习分享) 靶场下载地址:GitHub - mcc0624/php_ser_Class: php反序列化靶场课程,基于课程制作的靶场 课程地址:PHP反序列化漏洞学习_哔哩哔_…

【一周AI简讯】亚马逊推出企业级生成式AI聊天机器人,英伟达黄仁勋称AI将在5年内赶超人类

亚马逊推出企业级生成式AI聊天机器人Amazon Q 周二,亚马逊的云计算部门亚马逊网络服务 (AWS)推出了 Amazon Q,这是一款生成式 AI 聊天机器人。与 ChatGPT 和 Bard 不同,Amazon Q 并不基于单一的 AI 模型。相反,它在一个名为 Bedr…

Redis部署-哨兵模式

目录 redis sentinel相关名词 redis sentinel架构 故障转移流程 基于docker搭建redis哨兵 准备工作 搭建过程 模拟主节点宕机,观察哨兵节点的工作流程 哨兵重新选取主节点的流程 1.主观下线 2.客观下线 3.哨兵节点推举出一个leader节点 4.leader选举完毕,leader挑选…

智能优化算法应用:基于阿基米德优化算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于阿基米德优化算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于阿基米德优化算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.阿基米德优化算法4.实验参数设定5.算…