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

文章目录

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

1. 原生方式

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

在这里插入图片描述

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

2. 插件的方式

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

Bowser：一个功能强大的用户代理字符串解析器，可以解析出浏览器、操作系统和设备信息。
UAParser：一个轻量级的 JavaScript 库，用于解析用户代理字符串并提取浏览器、操作系统、设备和 CPU 信息
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>