js怎么查看浏览器版本

JS查看浏览器版本的方法有多种：使用navigator.userAgent、使用navigator.appVersion、以及使用功能检测（Feature Detection）等。其中，最常用的方法是通过navigator.userAgent来获取浏览器的用户代理字符串（user agent string），然后解析出浏览器的名称和版本。下面将详细介绍如何使用这些方法，并说明每种方法的优缺点。

一、使用`navigator.userAgent`

1. 获取用户代理字符串

用户代理字符串包含了浏览器的详细信息，包括名称、版本、操作系统等。我们可以通过navigator.userAgent属性来获取这个字符串。

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

2. 解析用户代理字符串

解析用户代理字符串需要一定的正则表达式知识，因为不同浏览器的用户代理字符串格式不同。以下是一些常见浏览器的解析方法：

function getBrowserInfo() {
    var ua = navigator.userAgent;
    var browserName, fullVersion, majorVersion;
    if ((verOffset = ua.indexOf("Opera")) != -1) {
        browserName = "Opera";
        fullVersion = ua.substring(verOffset + 6);
        if ((verOffset = ua.indexOf("Version")) != -1) 
            fullVersion = ua.substring(verOffset + 8);
    } else if ((verOffset = ua.indexOf("MSIE")) != -1) {
        browserName = "Microsoft Internet Explorer";
        fullVersion = ua.substring(verOffset + 5);
    } else if ((verOffset = ua.indexOf("Chrome")) != -1) {
        browserName = "Chrome";
        fullVersion = ua.substring(verOffset + 7);
    } else if ((verOffset = ua.indexOf("Safari")) != -1) {
        browserName = "Safari";
        fullVersion = ua.substring(verOffset + 7);
        if ((verOffset = ua.indexOf("Version")) != -1) 
            fullVersion = ua.substring(verOffset + 8);
    } else if ((verOffset = ua.indexOf("Firefox")) != -1) {
        browserName = "Firefox";
        fullVersion = ua.substring(verOffset + 8);
    } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
        browserName = ua.substring(nameOffset, verOffset);
        fullVersion = ua.substring(verOffset + 1);
        if (browserName.toLowerCase() == browserName.toUpperCase()) {
            browserName = navigator.appName;
        }
    }
    majorVersion = parseInt('' + fullVersion, 10);
    if (isNaN(majorVersion)) {
        fullVersion = '' + parseFloat(navigator.appVersion);
        majorVersion = parseInt(navigator.appVersion, 10);
    }
    return {
        browserName: browserName,
        fullVersion: fullVersion,
        majorVersion: majorVersion
    };
}
var browserInfo = getBrowserInfo();
console.log(browserInfo);

解析用户代理字符串的方法虽然有效，但它有一个主要缺点：用户代理字符串可能被篡改。因此，这种方法并不是百分之百可靠。

二、使用`navigator.appVersion`

navigator.appVersion也是一个包含浏览器版本信息的字符串，但它的格式和详细程度不如navigator.userAgent。

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

这个方法相对简单，但同样存在被篡改的可能性，而且不同浏览器的appVersion格式也有所不同。

三、使用功能检测（Feature Detection）

功能检测是一种更现代、更可靠的方法。它不依赖于用户代理字符串，而是通过检测浏览器是否支持某些特定功能来推断浏览器的类型和版本。这种方法不直接告诉你浏览器的名称和版本，但可以帮助你确定浏览器是否支持你需要的特定功能。

function detectBrowserFeatures() {
    var features = {
        touch: 'ontouchstart' in window,
        geolocation: 'geolocation' in navigator,
        localStorage: 'localStorage' in window && window['localStorage'] !== null,
        webworkers: 'Worker' in window,
        offline: 'applicationCache' in window,
        push: 'PushManager' in window,
    };
    return features;
}
var browserFeatures = detectBrowserFeatures();
console.log(browserFeatures);

功能检测方法虽然不能直接告诉你浏览器的版本，但它可以帮助你判断浏览器是否支持某些关键功能，从而确保你的应用程序在不同浏览器中的兼容性。

四、总结

在实际开发中，最常用的方法是通过navigator.userAgent来获取浏览器信息，然后使用正则表达式进行解析。虽然这种方法存在被篡改的风险，但它提供了最详细的浏览器信息。功能检测是一种更可靠但间接的方法，适用于需要判断浏览器功能支持的场景。

此外，在选择解析用户代理字符串的方法时，可以考虑使用成熟的库，如Bowser，它可以帮助简化解析过程并提高可靠性。

// 使用Bowser库
var browser = bowser.getParser(window.navigator.userAgent);
console.log(browser.getBrowserName());
console.log(browser.getBrowserVersion());

通过这些方法，你可以有效地获取浏览器的名称和版本信息，并根据这些信息调整你的应用程序，以确保最佳的用户体验。