js智能获取浏览器版本UA信息的方法

获取浏览器版本 UA 信息是前端工程师在日常开发中经常会用到的技能之一。下面提供几种获取浏览器版本的方法。

获取浏览器版本 UA 信息是前端工程师在日常开发中经常会用到的技能之一。下面提供几种获取浏览器版本的方法。

1. navigator.userAgent

navigator.userAgent 返回浏览器的用户代理字符串，通过解析这个字符串可以获取到浏览器的所有信息，包括浏览器类型、版本以及操作系统信息等。因此，这里用正则表达式进行版本号的提取。

const userAgent = navigator.userAgent;
const isChrome = /Chrome\/([\d]+)/.test(userAgent);
const isFirefox = /Firefox\/([\d]+)/.test(userAgent);
const isSafari = /Safari\/([\d]+)/.test(userAgent);
const isEdge = /Edge\/([\d]+)/.test(userAgent);
const isIE = /MSIE|Trident\/[\d]/.test(userAgent);

if (isChrome) {
  const chromeVersion = RegExp.$1;
  console.log(`Chrome version: ${chromeVersion}`);
} else if (isFirefox) {
  const firefoxVersion = RegExp.$1;
  console.log(`Firefox version: ${firefoxVersion}`);
} else if (isSafari) {
  const safariVersion = RegExp.$1;
  console.log(`Safari version: ${safariVersion}`);
} else if (isEdge) {
  const edgeVersion = RegExp.$1;
  console.log(`Edge version: ${edgeVersion}`);
} else if (isIE) {
  const ieVersion = navigator.appVersion.indexOf('Trident/');
  console.log(`IE version: ${ieVersion}`);
} else {
  console.log('Unknown browser');
}

2. window.navigator 和 window.clientInformation

可以通过 window.navigator 和 window.clientInformation 表示浏览器，其中 window.navigator.userAgent 是其中一个属性。这个属性和 navigator.userAgent 返回相同的信息。这种方法和第一种差不多，不过这种方式可以更准确一些。示例如下：

if (window.navigator.userAgent.indexOf('Chrome') !== -1) {
  console.log('Chrome');
}
if (window.navigator.userAgent.indexOf('Firefox') !== -1) {
  console.log('Firefox');
}

if (window.clientInformation.userAgent.indexOf('Safari') !== -1) {
  console.log('Safari');
}

注意，不同浏览器用户代理字符串里并不都是包含浏览器的名字，有些需要检测其他特征，如 Chrome 和 Safari 都是基于 WebKit 内核的，因此需要检测 WebKit 关键字。

这两种方法都能获取到浏览器版本信息，我们可以根据具体需求自己选择使用。