文章目录
- 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>
参考链接
- Bowser Github
- Ua-Parser-JS Github
- Platform.js Github