如何用js获取当前浏览器名称

快速回答：navigator.userAgent属性、正则表达式匹配、navigator.vendor属性等方法可以用来获取当前浏览器名称。使用navigator.userAgent属性获取浏览器信息，然后通过正则表达式进行匹配是最常用的方法。详细来说，navigator.userAgent属性包含了用户代理字符串，通过匹配该字符串中的特定标识符，我们可以判断当前浏览器的名称。

一、navigator.userAgent属性

1. 基本介绍

navigator.userAgent 是一个只读属性，返回表示浏览器的用户代理字符串。这串字符串包含了有关浏览器、操作系统、设备等信息。通过解析这个字符串，我们可以获取浏览器的名称。

2. 示例代码

function getBrowserName() {

    var userAgent = navigator.userAgent;
    var browserName;
    if (userAgent.indexOf("Chrome") > -1) {
        browserName = "Chrome";
    } else if (userAgent.indexOf("Safari") > -1) {
        browserName = "Safari";
    } else if (userAgent.indexOf("Firefox") > -1) {
        browserName = "Firefox";
    } else if (userAgent.indexOf("MSIE") > -1 || !!document.documentMode === true) {
        browserName = "IE"; // MSIE for IE10 and below, documentMode for IE11
    } else if (userAgent.indexOf("Edge") > -1) {
        browserName = "Edge";
    } else {
        browserName = "Unknown";
    }
    return browserName;
}
console.log(getBrowserName()); // 输出当前浏览器的名称

二、正则表达式匹配

1. 基本介绍

正则表达式是一种强大的字符串匹配工具，可以用来提取用户代理字符串中的特定浏览器标识符。通过这种方法，我们可以更灵活地判断浏览器名称。

2. 示例代码

function getBrowserName() {

    var userAgent = navigator.userAgent;
    var browserName;
    var browserPatterns = [
        { name: "Edge", pattern: /Edge/([0-9._]+)/ },
        { name: "Chrome", pattern: /Chrome/([0-9._]+)/ },
        { name: "Safari", pattern: /Safari/([0-9._]+)/ },
        { name: "Firefox", pattern: /Firefox/([0-9._]+)/ },
        { name: "IE", pattern: /MSIE ([0-9._]+)/ }
    ];
    for (var i = 0; i < browserPatterns.length; i++) {
        if (browserPatterns[i].pattern.test(userAgent)) {
            browserName = browserPatterns[i].name;
            break;
        }
    }
    if (!browserName) {
        browserName = "Unknown";
    }
    return browserName;
}
console.log(getBrowserName()); // 输出当前浏览器的名称

三、navigator.vendor属性

1. 基本介绍

navigator.vendor 属性返回浏览器的供应商信息。这在某些情况下可以帮助我们进一步确认浏览器的类型，尤其是在处理基于WebKit的浏览器（如Safari和Chrome）时。

2. 示例代码

function getBrowserName() {

    var vendor = navigator.vendor;
    var userAgent = navigator.userAgent;
    var browserName;
    if (vendor === "Google Inc.") {
        browserName = "Chrome";
    } else if (vendor === "Apple Computer, Inc.") {
        browserName = "Safari";
    } else if (userAgent.indexOf("Firefox") > -1) {
        browserName = "Firefox";
    } else if (userAgent.indexOf("MSIE") > -1 || !!document.documentMode === true) {
        browserName = "IE";
    } else if (userAgent.indexOf("Edge") > -1) {
        browserName = "Edge";
    } else {
        browserName = "Unknown";
    }
    return browserName;
}
console.log(getBrowserName()); // 输出当前浏览器的名称

四、综合使用以上方法

为了提高准确性和灵活性，我们可以综合使用上述方法，结合navigator.userAgent、正则表达式和navigator.vendor来获取浏览器名称。

1. 示例代码

function getBrowserName() {

    var userAgent = navigator.userAgent;
    var vendor = navigator.vendor;
    var browserName;
    var browserPatterns = [
        { name: "Edge", pattern: /Edge/([0-9._]+)/ },
        { name: "Chrome", pattern: /Chrome/([0-9._]+)/ },
        { name: "Safari", pattern: /Safari/([0-9._]+)/ },
        { name: "Firefox", pattern: /Firefox/([0-9._]+)/ },
        { name: "IE", pattern: /MSIE ([0-9._]+)/ }
    ];
    for (var i = 0; i < browserPatterns.length; i++) {
        if (browserPatterns[i].pattern.test(userAgent)) {
            browserName = browserPatterns[i].name;
            break;
        }
    }
    if (!browserName) {
        if (vendor === "Google Inc.") {
            browserName = "Chrome";
        } else if (vendor === "Apple Computer, Inc.") {
            browserName = "Safari";
        } else {
            browserName = "Unknown";
        }
    }
    return browserName;
}
console.log(getBrowserName()); // 输出当前浏览器的名称

五、实际应用和注意事项

1. 浏览器版本检测

除了获取浏览器名称，有时我们还需要获取浏览器的版本信息。可以通过解析用户代理字符串来实现这一点。

2. 示例代码

function getBrowserInfo() {

    var userAgent = navigator.userAgent;
    var browserInfo = {
        name: "Unknown",
        version: "Unknown"
    };
    var browserPatterns = [
        { name: "Edge", pattern: /Edge/([0-9._]+)/ },
        { name: "Chrome", pattern: /Chrome/([0-9._]+)/ },
        { name: "Safari", pattern: /Version/([0-9._]+).*Safari/ },
        { name: "Firefox", pattern: /Firefox/([0-9._]+)/ },
        { name: "IE", pattern: /MSIE ([0-9._]+)/ }
    ];
    for (var i = 0; i < browserPatterns.length; i++) {
        var match = userAgent.match(browserPatterns[i].pattern);
        if (match) {
            browserInfo.name = browserPatterns[i].name;
            browserInfo.version = match[1];
            break;
        }
    }
    return browserInfo;
}
var browserInfo = getBrowserInfo();
console.log("Browser Name: " + browserInfo.name); // 输出浏览器名称
console.log("Browser Version: " + browserInfo.version); // 输出浏览器版本

3. 跨浏览器兼容性

在实际开发中，确保代码在不同浏览器上都能正常运行是至关重要的。对于现代浏览器，这些方法通常能很好地工作，但对于一些老旧或不常见的浏览器，可能需要进行额外的测试和调整。

4. 用户代理字符串的变化

需要注意的是，用户代理字符串并不是固定不变的。不同版本的浏览器可能会对用户代理字符串进行修改，因此在实际应用中需要不断更新和测试代码，以确保其准确性。

六、总结

navigator.userAgent属性和正则表达式匹配是获取浏览器名称的主要方法。通过结合这些方法，我们可以高效、准确地获取当前浏览器的名称和版本信息。在实际应用中，注意跨浏览器的兼容性和用户代理字符串的变化是非常重要的。

相关问答FAQs：

1. 问题： 我如何使用JavaScript来获取当前浏览器的名称？
回答： 通过以下代码段，您可以使用JavaScript获取当前浏览器的名称：

var browserName = navigator.userAgent.toLowerCase();
if (browserName.indexOf("msie") !== -1) {
  browserName = "Internet Explorer";
} else if (browserName.indexOf("firefox") !== -1) {
  browserName = "Mozilla Firefox";
} else if (browserName.indexOf("chrome") !== -1) {
  browserName = "Google Chrome";
} else if (browserName.indexOf("safari") !== -1) {
  browserName = "Safari";
} else if (browserName.indexOf("opera") !== -1) {
  browserName = "Opera";
} else {
  browserName = "Unknown";
}
console.log("当前浏览器名称：" + browserName);

此代码段将使用navigator.userAgent属性来获取用户代理字符串，然后根据特定的关键词来判断浏览器名称。请注意，这只是一种基本的方法，某些浏览器可能会返回不同的用户代理字符串，因此您可能需要根据您的需求进行适当的调整。

2. 问题： 如何使用JavaScript检测用户是否正在使用特定的浏览器？
回答： 通过以下代码段，您可以使用JavaScript检测用户是否正在使用特定的浏览器：

var isChrome = /Chrome/.test(navigator.userAgent);
if (isChrome) {
  console.log("用户正在使用Google Chrome浏览器");
} else {
  console.log("用户不是在使用Google Chrome浏览器");
}

此代码段使用正则表达式来匹配用户代理字符串中是否包含"Chrome"关键词。您可以根据需要更改关键词来检测其他浏览器。

3. 问题： 如何使用JavaScript判断当前浏览器是否为移动设备浏览器？
回答： 通过以下代码段，您可以使用JavaScript判断当前浏览器是否为移动设备浏览器：

var isMobileBrowser = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobileBrowser) {
  console.log("当前浏览器是移动设备浏览器");
} else {
  console.log("当前浏览器不是移动设备浏览器");
}

此代码段使用正则表达式来匹配用户代理字符串中是否包含移动设备相关的关键词。如果匹配成功，则判断为移动设备浏览器。您可以根据需要调整正则表达式中的关键词来适应其他移动设备浏览器的判断。