获取浏览器版本、浏览器类型是前端开发中经常需要用到的技巧之一，下面是该功能的完整实现攻略：

获取浏览器类型

我们可以通过navigator.userAgent属性获取到当前浏览器的User-Agent标识，再根据这个标识来判断当前浏览器类型。以下是实现代码：

function getBrowserType() {
  var userAgent = navigator.userAgent;
  if (userAgent.indexOf("Firefox") !== -1) {
    return "Firefox";
  } else if (userAgent.indexOf("Chrome") !== -1) {
    return "Chrome";
  } else if (userAgent.indexOf("Safari") !== -1) {
    return "Safari";
  } else if (userAgent.indexOf("Trident") !== -1) {
    return "IE";
  } else {
    return "Unknown";
  }
}

在上面的代码中，我们通过判断userAgent字符串中是否包含Firefox、Chrome、Safari、Trident等浏览器的关键字来判断当前浏览器类型。

以下是一个示例，演示如何通过上面的getBrowserType函数获取当前浏览器类型：

var browserType = getBrowserType();
console.log(browserType);    // Chrome

获取浏览器版本

对于不同的浏览器，获取浏览器版本的方法不同。以下是各浏览器获取版本号的方法：

Chrome

Chrome浏览器的版本信息存储在navigator.userAgent中，具体格式是Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36，其中Chrome/58.0.3029.110就是版本号。我们可以通过正则表达式来匹配版本号，具体代码如下：

function getChromeVersion() {
  var userAgent = navigator.userAgent;
  var match = userAgent.match(/Chrome\/(\d+\.\d+\.\d+\.\d+)/);
  if (match) {
    return match[1];
  } else {
    return "Unknown";
  }
}

以下是一个示例，演示如何通过上面的getChromeVersion函数获取当前Chrome浏览器版本号：

var chromeVersion = getChromeVersion();
console.log(chromeVersion);    // 91.0.4472.124

Firefox

Firefox浏览器的版本号可以通过navigator.userAgent和navigator.appVersion两个属性获取，具体代码如下：

function getFirefoxVersion() {
  var userAgent = navigator.userAgent;
  var match = userAgent.match(/Firefox\/(\d+\.\d+)/);
  if (match) {
    return match[1];
  } else {
    var appVersion = navigator.appVersion;
    var versionIndex = appVersion.indexOf("Firefox/");
    if (versionIndex !== -1) {
      return appVersion.substr(versionIndex + 8);
    } else {
      return "Unknown";
    }
  }
}

以下是一个示例，演示如何通过上面的getFirefoxVersion函数获取当前Firefox浏览器版本号：

var firefoxVersion = getFirefoxVersion();
console.log(firefoxVersion);    // 89.0

Safari

Safari浏览器的版本号存储在navigator.userAgent中，具体格式是Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1 Safari/605.1.15，其中Version/11.1就是版本号。我们可以通过正则表达式来匹配版本号，具体代码如下：

function getSafariVersion() {
  var userAgent = navigator.userAgent;
  var match = userAgent.match(/Version\/(\d+\.\d+)/);
  if (match) {
    return match[1];
  } else {
    return "Unknown";
  }
}

以下是一个示例，演示如何通过上面的getSafariVersion函数获取当前Safari浏览器版本号：

var safariVersion = getSafariVersion();
console.log(safariVersion);    // 14.1

IE

IE浏览器的版本号存储在navigator.userAgent中，具体格式是Mozilla/5.0 (Windows NT 10.0; Win64; x64; Trident/7.0; rv:11.0) like Gecko，其中Trident/7.0; rv:11.0就是版本号。我们可以通过正则表达式来匹配版本号，具体代码如下：

function getIEVersion() {
  var userAgent = navigator.userAgent;
  var match = userAgent.match(/(MSIE|rv:)\s?(\d+\.\d+)/);
  if (match) {
    return match[2];
  } else {
    return "Unknown";
  }
}

以下是一个示例，演示如何通过上面的getIEVersion函数获取当前IE浏览器版本号：

var ieVersion = getIEVersion();
console.log(ieVersion);    // 11.0

综上所述，通过上述代码可以实现获取浏览器类型和浏览器版本的功能，从而进行更精准的页面适配和功能兼容。

本文链接：http://task.lmcjl.com/news/10116.html