获取浏览器类型，Navigator.userAgent

一、前言

又又又遇到了兼容 IE 的需求，好在只需要兼容到 IE11，这是一个 bpmn 流程设计器生成流程图（svg），用了一种保存图的写法，但这种写法在 IE11 上有bug，总之就是保存的图没有 Chrome 等其他浏览器完美。于是我们需要识别用户使用的浏览器类型，对 IE浏览器做提供些特别处理。

那么这就设计如何识别用户使用的浏览器类型的问题，这里使用的是 Navigator.userAgent 来获取能代表浏览器的标识字符串。

二、关键技术提前知

1.Navigator.userAgent

userAgent 是 Navigator 的只读属性，返回当前浏览器的用户代理字符串。即是返回用户当前使用的浏览器的能代表浏览器的字符串标识。

tips1：

基于检测用户代理字符串的浏览器识别是 不可靠的，不推荐使用，因为用户代理字符串是用户可配置的。例如：

• 在 Firefox 中，您可以general.useragent.override更改 about:config. 一些 Firefox 扩展可以做到这一点；但是，这只会更改发送并由navigator.userAgent. 可能还有其他方法利用 JavaScript 代码来识别浏览器。
• Opera 6+ 允许用户通过菜单设置浏览器识别字符串。
• Microsoft Internet Explorer 使用 Windows 注册表。
• Safari 和 iCab 允许用户通过菜单将浏览器用户代理字符串更改为预定义的 Internet Explorer 或 Netscape 字符串。

tps2： 尽管从更安全和规范的角度说，这并不被推荐，但实践中这似乎是判断浏览器类型的最好手段了。如有更好地方案，欢迎评论区分享。

2.浏览器兼容性

2.1 userAgent 的浏览器兼容性

userAgent 是较早就被各大浏览器支持了的，浏览器兼容性方面可以说很好，从兼容这个角度讲，可以放心大胆的用。具体上 IE4、Chrome1，Safari1，Firefox1就已经支持了。更多兼容性详情如下图所示。

2.2 match() 的浏览器兼容性

match() 也很早就被各大浏览器支持，它的浏览器兼容性也非常好，具体如下图所示。

3.String.prototype.match()

match() 方法检索返回一个字符串匹配正则表达式的结果。

需要注意的是：

①如果正则表达式不包含 g 标志，str.match() 将返回与 RegExp.exec(). 相同的结果。

②如果你想要获得捕获组，并且设置了全局标志，你需要用 RegExp.exec() 或者 String.prototype.matchAll()。

4.使用示例

获取 userAgent 返回的字符串

const userAgent = window.navigator.userAgent
console.log(userAgent) // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

// 通过字符串匹配关键字识别是哪种浏览器，例如 userAgent.match(/firefox/)，
// 在 userAgent 中寻找关键字firefox，能找到匹配的则认为是火狐浏览器。

let browserType = ""
if (userAgent.match(/firefox/) != null) {
    browserType = '火狐'
}

三、获取浏览器类型函数

**
 * 获取浏览器类型
 * @returns {null|string} 返回浏览器类型
 */
export function getBrowser () {
  let ua = navigator.userAgent.toLocaleLowerCase()
  let browserType = null

  if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
    browserType = 'IE'
  } else if (ua.match(/firefox/) != null) {
    browserType = '火狐'
  } else if (ua.match(/ubrowser/) != null) {
    browserType = 'UC'
  } else if (ua.match(/opera/) != null) {
    browserType = '欧朋'
  } else if (ua.match(/bidubrowser/) != null) {
    browserType = '百度'
  } else if (ua.match(/metasr/) != null) {
    browserType = '搜狗'
  } else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
    browserType = 'QQ'
  } else if (ua.match(/maxthon/) != null) {
    browserType = '遨游'
  } else if (ua.match(/chrome/) != null) {
    let is360 = false
    let mimeTypes = navigator.mimeTypes
    for (var mt in mimeTypes) {
      if (mimeTypes[mt]['type'] === 'application/vnd.chromium.remoting-viewer') {
        return true
      }
    }
    if (is360) {
      browserType = '360'
    } else {
      browserType = 'Chrome'
    }
  } else if (ua.match(/safari/) != null) {
    browserType = 'Safari'
  }

  return browserType
}