js如何判断浏览器种类和版本

一、如何判断浏览器种类和版本

通过 User Agent 字符串、使用内置对象、依赖特定功能的存在性。判断浏览器种类和版本最常用的方法是解析用户代理（User Agent）字符串。User Agent 字符串包含了浏览器的名称和版本信息。除此之外，还可以通过检测浏览器内置对象或特定功能的存在性来判断具体的浏览器类型。推荐使用内置对象和特定功能的检测方式，因为 User Agent 字符串容易被伪造。

二、User Agent 字符串解析

User Agent 字符串是每个浏览器在发送 HTTP 请求时附带的一个字符串，它包含了浏览器、操作系统、设备等信息。

1. 获取 User Agent 字符串

在 JavaScript 中，可以通过 navigator.userAgent 获取当前浏览器的 User Agent 字符串。

var userAgent = navigator.userAgent;
console.log(userAgent);

2. 解析 User Agent 字符串

解析 User Agent 字符串需要根据不同的浏览器特征进行匹配。以下是一些常见浏览器的 User Agent 特征：

Google Chrome: 包含字符串 "Chrome" 和 "Safari"，但不包含 "Edge" 或 "OPR"。
Mozilla Firefox: 包含字符串 "Firefox"。
Microsoft Edge: 包含字符串 "Edge" 或 "Edg"。
Safari: 包含字符串 "Safari"，但不包含 "Chrome"。
Opera: 包含字符串 "OPR"。

示例代码如下：

function getBrowserInfo() {
    var userAgent = navigator.userAgent;
    var browserName, fullVersion;
    if (userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Edge") === -1 && userAgent.indexOf("OPR") === -1) {
        browserName = "Google Chrome";
        fullVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);
        fullVersion = fullVersion.substring(0, fullVersion.indexOf(" "));
    } else if (userAgent.indexOf("Firefox") > -1) {
        browserName = "Mozilla Firefox";
        fullVersion = userAgent.substring(userAgent.indexOf("Firefox") + 8);
    } else if (userAgent.indexOf("Edge") > -1 || userAgent.indexOf("Edg") > -1) {
        browserName = "Microsoft Edge";
        fullVersion = userAgent.substring(userAgent.indexOf("Edge") + 5);
    } else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
        browserName = "Safari";
        fullVersion = userAgent.substring(userAgent.indexOf("Version") + 8);
        fullVersion = fullVersion.substring(0, fullVersion.indexOf(" "));
    } else if (userAgent.indexOf("OPR") > -1) {
        browserName = "Opera";
        fullVersion = userAgent.substring(userAgent.indexOf("OPR") + 4);
    } else {
        browserName = "Unknown";
        fullVersion = "Unknown";
    }
    return {
        name: browserName,
        version: fullVersion
    };
}
var browserInfo = getBrowserInfo();
console.log("Browser Name: " + browserInfo.name);
console.log("Browser Version: " + browserInfo.version);

三、使用内置对象和特定功能

通过检测浏览器特定的内置对象或功能，可以更加准确地判断浏览器类型。这种方法较为可靠，因为 User Agent 字符串可能被伪造。

1. 检测内置对象

某些浏览器有特定的全局对象，例如：

Chrome: window.chrome
Firefox: InstallTrigger
Edge: window.StyleMedia
Safari: window.safari

示例代码如下：

function detectBrowser() {
    if (window.chrome && !window.opr && !window.safari) {
        return { name: "Google Chrome", version: getChromeVersion() };
    } else if (typeof InstallTrigger !== 'undefined') {
        return { name: "Mozilla Firefox", version: getFirefoxVersion() };
    } else if (window.StyleMedia) {
        return { name: "Microsoft Edge", version: getEdgeVersion() };
    } else if (window.safari) {
        return { name: "Safari", version: getSafariVersion() };
    } else if (window.opr) {
        return { name: "Opera", version: getOperaVersion() };
    } else {
        return { name: "Unknown", version: "Unknown" };
    }
}
function getChromeVersion() {
    // Implementation for Chrome version detection
    return /Chrome/([0-9.]+)/.exec(navigator.userAgent)[1];
}
function getFirefoxVersion() {
    // Implementation for Firefox version detection
    return /Firefox/([0-9.]+)/.exec(navigator.userAgent)[1];
}
function getEdgeVersion() {
    // Implementation for Edge version detection
    return /Edg/([0-9.]+)/.exec(navigator.userAgent)[1];
}
function getSafariVersion() {
    // Implementation for Safari version detection
    return /Version/([0-9.]+)/.exec(navigator.userAgent)[1];
}
function getOperaVersion() {
    // Implementation for Opera version detection
    return /OPR/([0-9.]+)/.exec(navigator.userAgent)[1];
}
var browser = detectBrowser();
console.log("Browser: " + browser.name);
console.log("Version: " + browser.version);

四、依赖特定功能的存在性

另一种方法是检测特定功能的存在性。例如，某些浏览器支持某些特定的功能或 API，可以通过这些特征来判断浏览器。

1. 例子：检测 IndexedDB

if ('indexedDB' in window) {
    console.log("This browser supports IndexedDB");
} else {
    console.log("This browser does not support IndexedDB");
}

2. 例子：检测 Service Worker

if ('serviceWorker' in navigator) {
    console.log("This browser supports Service Worker");
} else {
    console.log("This browser does not support Service Worker");
}

五、使用库或工具

为了方便开发者，有很多第三方库和工具可以帮助判断浏览器种类和版本。例如：

Bowser：一个小巧的 JavaScript 库，可以用来解析浏览器的 User Agent 字符串。

安装方法：

npm install bowser

使用方法：

const Bowser = require("bowser");
const browser = Bowser.getParser(window.navigator.userAgent);
const browserInfo = browser.getBrowser();
console.log("Browser Name: " + browserInfo.name);
console.log("Browser Version: " + browserInfo.version);

六、总结

判断浏览器种类和版本的方法有很多，常见的有通过解析 User Agent 字符串、检测内置对象和特定功能的存在性。推荐使用内置对象和特定功能检测的方式，因为 User Agent 字符串容易被伪造。此外，还可以使用第三方库如 Bowser 来简化这一过程。无论选择哪种方法，都应根据具体需求选择最合适的实现方式。

七、项目团队管理系统的推荐

在开发和维护项目过程中，合理使用项目团队管理系统可以大大提高效率。推荐使用研发项目管理系统 PingCode 和通用项目协作软件 Worktile。这两个系统提供了丰富的功能，可以帮助团队更好地协作和管理项目。

PingCode：专为研发团队设计的项目管理系统，支持需求管理、缺陷管理、迭代管理等功能。
Worktile：通用项目协作软件，支持任务管理、团队协作、时间管理等多种功能，非常适合各种类型的团队使用。