js 获取浏览器版本|极客笔记

js 获取浏览器版本

在web开发中，我们经常需要根据用户所使用的浏览器版本来进行特定的处理，例如兼容性处理或显示不同的内容等。本文将详细介绍如何使用JavaScript来获取浏览器版本信息。

通过navigator对象获取浏览器信息

在JavaScript中，我们可以使用navigator对象来获取关于浏览器的信息，包括浏览器的名称、版本号等。下面是一些常用的属性：

navigator.userAgent: 返回浏览器的User-Agent头部信息，包括浏览器的名称和版本等。
navigator.appName: 返回浏览器的名称。
navigator.appVersion: 返回浏览器的版本。
navigator.platform: 返回浏览器所在的操作系统平台。

我们可以通过这些属性来获取浏览器的信息，下面我们使用这些属性来获取浏览器的名称和版本。

let browserName = navigator.appName;
let browserVersion = navigator.appVersion;

console.log("Browser Name: ", browserName);
console.log("Browser Version: ", browserVersion);

以上代码会输出类似以下内容：

Browser Name:  Netscape
Browser Version:  5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

通过以上代码，我们可以获取到当前浏览器的名称和版本信息。但需要注意的是，navigator.userAgent返回的信息可能会有所不同，因为用户可以通过修改浏览器的User-Agent头部信息来伪装自己的浏览器信息。

使用正则表达式提取浏览器版本号

有时候我们只需要获取浏览器的版本号，而navigator.appVersion返回的信息包含了很多其他信息，这时候我们可以使用正则表达式来提取版本号。

下面展示一个简单的示例，提取浏览器版本号：

let userAgent = navigator.userAgent;
let version = userAgent.match(/(Chrome|Safari|Firefox)\/(\S+)/);

if (version) {
    console.log("Browser Version: ", version[2]);
} else {
    console.log("Failed to get browser version.");
}

以上代码会输出类似以下内容（假设用户使用的是Chrome浏览器）：

Browser Version:  74.0.3729.169

兼容性处理

在实际项目中，我们可能需要根据不同浏览器版本来进行一些兼容性处理，以确保网页在不同浏览器上的正常显示。下面是一个简单的示例，根据浏览器版本来判断是否为IE浏览器，如果是则显示提示信息。

let userAgent = navigator.userAgent;
let isIE = userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1;

if (isIE) {
    alert("您正在使用IE浏览器，请注意兼容性！");
}

以上代码会在用户使用IE浏览器时弹出提示框。