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

news2024/11/15 17:58:26

文章目录

- 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>