【日常记录】【插件】js 获取浏览器信息、操作系统等相关信息

文章目录

    • 1. 原生方式
    • 2. 插件的方式
      • 2.1 Bowser 的基本使用
      • 2.2 UAParser
      • 2.3 Platform.js
    • 参考链接

1. 原生方式

原生方式可以通过 navigator.userAgent 来获取

在这里插入图片描述

需要写一个正则来匹配,获取相关的信息

2. 插件的方式

获取浏览器版本相关信息的库主要有以下几个

  1. Bowser:一个功能强大的用户代理字符串解析器,可以解析出浏览器、操作系统和设备信息。
  2. UAParser:一个轻量级的 JavaScript 库,用于解析用户代理字符串并提取浏览器、操作系统、设备和 CPU 信息
  3. Platform.js:一个用户代理字符串解析器,可以检测浏览器、操作系统和引擎信息。一个用户代理字符串解析器,可以检测浏览器、操作系统和引擎信息。

2.1 Bowser 的基本使用

在这里插入图片描述

引入地址:https://cdn.bootcdn.net/ajax/libs/bowser/2.11.0/bundled.js

方式一

bowser.getParser(window.navigator.userAgent)
调用Bowser 的 getParser 方法,吧浏览器的 userAgent 传递进去,接收返回值

返回值如下:
在这里插入图片描述

方式二

bowser.parse(window.navigator.userAgent)
调用Bowser 的 parse 方法,吧浏览器的 userAgent 传递进去,接收返回值

返回值如下:
在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/bowser/2.11.0/bundled.js"></script>
<script>
  // 方式一
  const browser = bowser.getParser(window.navigator.userAgent);

  console.log(`浏览器名称: "${browser.getBrowserName()}"`); // 浏览器名称: "Microsoft Edge"

  // 方式二
  console.log(bowser.parse(window.navigator.userAgent));
  // {
  //   "browser": { // 浏览器相关
  //     "name": "Microsoft Edge", // 浏览器名称
  //      "version": "126.0.0.0" // 浏览器版本
  //   },
  //   "os": { // 操作系统相关
  //     "name": "Windows", // 操作系统名称
  //      "version": "NT 10.0", // 操作系统的版本号
  //      "versionName": "10"// 操作系统的版本名称
  //   },
  //   "platform": { // 平台
  //     "type": "desktop" // desktop:桌面版,mobile:移动端,tablet:平板
  //   },
  //   "engine": { // 引擎
  //     "name": "Blink" // 引擎名称,可能回有。Blink/WebKit/Gecko 等
  //   }
  // }
</script>

2.2 UAParser

在这里插入图片描述

引用地址:https://cdn.bootcdn.net/ajax/libs/UAParser.js/1.0.37/ua-parser.js

完整输出如下:
在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/UAParser.js/1.0.37/ua-parser.js"></script>
<script>
  console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~');
  const parser = new UAParser(window.navigator.userAgent)
  let res = parser.getResult()
  console.log(res);

  // {name: 'Edge', version: '126.0.0.0', major: '126'}
  console.log(parser.getBrowser());

  // {architecture: 'amd64'}
  console.log(parser.getCPU());

  // {name: 'Blink', version: '126.0.0.0'}
  console.log(parser.getEngine());

  // {vendor: undefined, model: undefined, type: undefined}
  console.log(parser.getDevice());

  // {name: 'Windows', version: '10'}
  console.log(parser.getOS());

</script>

在这里插入图片描述

这个插件,可以获取的东西很多,但是有些东西收费

2.3 Platform.js

在这里插入图片描述

引入地址:https://cdn.bootcdn.net/ajax/libs/platform/1.3.6/platform.js

在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/platform/1.3.6/platform.js"></script>
<script>
  console.log('~~~~~~~~~~~~~~~~~~~~~~~~');
  console.log(platform);
</script>

参考链接

  • Bowser Github
  • Ua-Parser-JS Github
  • Platform.js Github

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

01MFC建立单个文件类型——画线

文章目录 选择模式初始化文件作用解析各初始化文件解析类导向创建鼠标按键按下抬起操作函数添加一个变量记录起始位置注意事项代码实现效果图虚实/颜色线选择模式 初始化文件作用解析 运行: 各初始化文件解析 MFC(Microsoft Foundation Classes)是一个C++类库,用于在Win…

力扣 双指针基础

class Solution {public void moveZeroes(int[] nums) {int l 0;//慢指针但先走for (int r 0; r < nums.length; r) {//快指针&#xff0c;遍历次数if (nums[r] 0) continue;//l比r先到&#xff0c;在此处定住l&#xff0c;r继续移动int t nums[l];nums[l] nums[r];num…

今天小编强烈推荐几款国产APP!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 今天小编强烈推荐几款国产APP,算得上是国产之光。如果能帮助到大家&#xff0c;别忘了给小编点点赞加关注哟&#xff01;更多精彩还在后面。 一、…

节点流与处理流:深入解析Java中的IO流

节点流与处理流&#xff1a;深入解析Java中的IO流 1、节点流&#xff08;Node Stream&#xff09;1.1 定义1.2 好处1.3 示例 2、处理流&#xff08;Processing Stream&#xff09;2.1 定义2.2 好处2.3 创建特征2.4 示例 3、总结 &#x1f496;The Begin&#x1f496;点点关注&…

关于string的‘\0‘与string,vector构造特点,反迭代器与迭代器类等的讨论

目录 问题一&#xff1a;关于string的\0问题讨论 问题二&#xff1a;C标准库中的string内存是分配在堆上面吗&#xff1f; 问题三&#xff1a;string与vector的capacity大小设计的特点 问题四&#xff1a;string的流提取问题 问题五&#xff1a;迭代器失效 问题六&#xf…

05_Shell索引数组

05_Shell索引数组 数组定义 #!/bin/basharr(1 2 3 "www.baidu.com")获取数组元素 #!/bin/basharr(1 2 3 "www.baidu.com")#通过下表获取元素 下标从1开始 ${arr[1]}#获取数组所有元素 ${arr[*]} 或者 ${arr[]}#获取数组长度 ${#arr[*]} 或者 ${#arr[*]}#获…

LeetCode(2)合并链表、环形链表的约瑟夫问题、链表分割

一、合并链表 . - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ typedef struct ListNode ListNode; struct ListNode* mergeTwoLists(struct …

选择最佳工具:评估8款顶级App界面设计软件

在如今的数字化时代&#xff0c;设计师也离不开各种界面设计软件来辅助自己的设计工作。在各种界面设计软件的帮助下&#xff0c;设计师们能够更好、更快地完成自己的设计工作。而今天本文要为大家推荐的这 8 款界面设计软件&#xff0c;分别是国产APP界面设计软件、Figma、Ske…

【数据库】Redis主从复制、哨兵模式、集群

目录 一、Redis的主从复制 1.1 主从复制的架构 1.2 主从复制的作用 1.3 注意事项 1.4 主从复制用到的命令 1.5 主从复制流程 1.6 主从复制实现 1.7 结束主从复制 1.8 主从复制优化配置 二、哨兵模式 2.1 哨兵模式原理 2.2 哨兵的三个定时任务 2.3 哨兵的结构 2.4 哨…

校园外卖系统带万字文档在线外卖管理系统java项目java课程设计java毕业设计

文章目录 校园外卖系统一、项目演示二、项目介绍三、万字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带万字文档&#xff08;9.9&#xffe5;带走&#xff09; 校园外卖系统 一、项目演示 校园外卖服务系统 二、项目介绍 语言&#xff1a;java 数据库&…

ARM功耗管理标准接口之ACPI

安全之安全(security)博客目录导读 思考&#xff1a;功耗管理有哪些标准接口&#xff1f;ACPI&PSCI&SCMI&#xff1f; Advanced Configuration and Power Interface Power State Coordination Interface System Control and Management Interface ACPI可以被理解为一…

2023年高教杯数学建模2023B题解析(仅从代码角度出发)

前言 最近博主正在和队友准备九月的数学建模,在做往年的题目&#xff0c;博主主要是负责数据处理&#xff0c;运算以及可视化&#xff0c;这里分享一下自己部分的工作,相关题目以及下面所涉及的代码后续我会作为资源上传 问题求解 第一题 第一题的思路主要如下&#xff1a;…

单链表--续(C语言详细版)

2.6 在指定位置之前插入数据 // 在指定位置之前插入数据 void SLTInsert(SLTNode** pphead, SLTNode* pos, SLTDataType x); 分为两种情况&#xff1a;1. 插入的数据在链表中间&#xff1b;2. 插入的数据在链表的前面。 // 在指定位置之前插入数据 void SLTInsert(SLTNode** …

TISAX认证是什么?

TISAX认证是一种针对汽车行业数据安全和隐私保护的评估认证&#xff0c;其全称在不同资料中有所差异&#xff0c;但普遍认可的是它作为汽车行业信息安全评估体系的重要性。以下是对TISAX认证的详细解读&#xff1a; 一、背景和目的 随着汽车技术的不断发展&#xff0c;汽车数…

MySQL—统计函数和数学函数以及GROUP BY配合HAVING

合计/统计函数 count -- 演示 mysql 的统计函数的使用 -- 统计一个班级共有多少学生&#xff1f; SELECT COUNT(*) FROM student -- 统计数学成绩大于 90 的学生有多少个&#xff1f; SELECT COUNT(*) FROM student WHERE math > 90 -- 统计总分大于 250 的人数有多少&…

git-工作场景

1. 远程分支为准 强制切换到远程分支并忽略本地未提交的修改 git fetch origin # 获取最新的远程分支信息 git reset --hard origin/feature_server_env_debug_20240604 # 强制切换到远程分支&#xff0c;并忽略本地修改 2. 切换分支 1. **查看所有分支&#xff1a;**…

NewStarCTF2023-Misc

目录 week1 CyberChefs Secret 机密图片 流量&#xff01;鲨鱼&#xff01; 压缩包们 空白格 隐秘的眼睛 week2 新建Word文档 永不消逝的电波 1-序章 base! WebShell的利用 Jvav week3 阳光开朗大男孩 大怨种 2-分析 键盘侠 滴滴滴 week4 通大残 Nmap 依…

buuctf被嗅探的流量

下载出来是一个流量分析题 因为题目说了是联网状态下 嗅探到 所以一定有http协议 这里设置过滤器 一个一个去找吧 目前感觉wireshark的题都是http,太难的也不会

最后纪元Last Epoch可以通过什么搬砖 游戏搬砖教程

来喽来喽&#xff0c;最后纪元&#xff0c;一款《最后纪元》是一款以获得战利品为基础的暗黑风格动作RPG游戏&#xff0c;玩家将从2281年的毁灭时代追溯到由女神Eterra创造的世界&#xff0c;通过多个时代与黑暗的命运对抗&#xff0c;找到拯救世界的方式。游戏有五种职业&…

二叉平衡树(左单旋,右单旋,左右双旋、右左双旋)

一、AVL树&#xff08;二叉平衡树&#xff1a;高度平衡的二叉搜索树&#xff09; 0、二叉平衡树 左右子树高度差不超过1的二叉搜索树。 public class AVLTree{static class AVLTreeNode {public TreeNode left null; // 节点的左孩子public TreeNode right null; // 节点的…