JS获取浏览器信息|极客笔记

JS获取浏览器信息

在web开发中，我们经常需要获取用户使用的浏览器信息来做一些特定的处理，比如兼容性处理、统计分析等。本文将介绍如何使用JavaScript来获取用户的浏览器信息。

1. 用户代理字符串

浏览器会将其相关信息以字符串形式包含在navigator.userAgent中，这就是用户代理字符串（User Agent String）。通常用户代理字符串中会包含浏览器的名称、版本号、操作系统等信息。

下面是一个示例：

console.log(navigator.userAgent);

运行结果可能如下：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

2. 判断浏览器类型

我们可以通过解析用户代理字符串，来判断用户使用的浏览器类型。下面是一个简单示例：

function getBrowserInfo() {
    let userAgent = navigator.userAgent;

    if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
    } else if (userAgent.indexOf("Firefox") > -1) {
        return "Firefox";
    } else if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
        return "Internet Explorer";
    } else {
        return "Unknown";
    }
}

console.log(getBrowserInfo());

运行结果可能是：

Chrome

3. 获取浏览器版本号

除了获取浏览器类型外，我们还可以通过解析用户代理字符串来获取浏览器的版本信息。下面是一个示例：

function getBrowserVersion() {
    let userAgent = navigator.userAgent;
    let start = userAgent.indexOf("Chrome/");

    if (start > -1) {
        let version = userAgent.substring(start + 7);
        let end = version.indexOf(" ");
        return version.substring(0, end);
    } else {
        return "Unknown";
    }
}

console.log(getBrowserVersion());

运行结果可能是：

91.0.4472.124

4. 判断操作系统

通过解析用户代理字符串，我们还可以获取用户使用的操作系统信息。下面是一个示例：

function getOSInfo() {
    let userAgent = navigator.userAgent;

    if (userAgent.indexOf("Windows NT 10.0") > -1) {
        return "Windows 10";
    } else if (userAgent.indexOf("Mac OS X") > -1) {
        return "MacOS";
    } else if (userAgent.indexOf("Android") > -1) {
        return "Android";
    } else if (userAgent.indexOf("iPhone") > -1) {
        return "iOS";
    } else {
        return "Unknown";
    }
}

console.log(getOSInfo());

运行结果可能是：