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>

参考链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值