Js 获取、判断浏览器版本信息的简单方法

获取、判断浏览器版本信息是前端开发中常见的操作需求。接下来我将为大家讲解如何使用JavaScript实现获取、判断浏览器版本信息的简单方法。

获取、判断浏览器版本信息是前端开发中常见的操作需求。接下来我将为大家讲解如何使用JavaScript实现获取、判断浏览器版本信息的简单方法。

方法一：使用navigator.userAgent字符串

每个HTTP请求（包括浏览器载入页面、图像以及框架等）都包含一个头部信息User-Agent（用户代理）。该信息通常包含浏览器类型、版本、操作系统、引擎等信息。我们可以利用这个信息来获取浏览器版本信息。以下是代码示例：

// 获取userAgent信息
const ua = navigator.userAgent.toLowerCase();

// 判断是否为IE 浏览器，因为IE浏览器有独特的userAgent信息
if (/msie|trident/.test(ua)) {
    // IE11 及以下版本
    if (/msie \d+/.test(ua)) {
        const ieVersion = parseInt(ua.match(/msie (\d+)/)[1]);
        console.log(`IE ${ieVersion}`);
    } else {
        console.log('IE 11或以上版本');
    }
}
// 判断是否为Edge 浏览器
else if (/edge\/(\d+)/.test(ua)) {
    const edgeVersion = parseInt(ua.match(/edge\/(\d+)/)[1]);
    console.log(`Edge ${edgeVersion}`);
}
// 判断是否为firefox 浏览器
else if (/firefox\/(\d+)/.test(ua)) {
    const firefoxVersion = parseInt(ua.match(/firefox\/(\d+)/)[1]);
    console.log(`Firefox ${firefoxVersion}`);
}
// 判断是否为chrome 浏览器
else if (/chrome\/(\d+)/.test(ua)) {
    const chromeVersion = parseInt(ua.match(/chrome\/(\d+)/)[1]);
    console.log(`Chrome ${chromeVersion}`);
}
// 判断是否为Safari 浏览器
else if (/safari\/(\d+)/.test(ua)) {
    const safariVersion = parseInt(ua.match(/safari\/(\d+)/)[1]);
    console.log(`Safari ${safariVersion}`);
}

在上面的代码中，首先我们获取了navigator.userAgent信息，并将其转换为小写字符。之后针对不同浏览器进行了判断，并通过正则表达式匹配浏览器版本信息，最后输出浏览器类型和版本。此段代码适用于IE、Edge、Firefox、Chrome和Safari等主流浏览器。

方法二：使用navigator.appVersion字符串

除了上述navigator.userAgent字符串，还可以使用navigator.appVersion字符串来获取浏览器和操作系统信息。以下是示例代码：

const appVersion = navigator.appVersion.toLowerCase();

// 判断是否为macOS 系统
if (/mac/i.test(appVersion)) {
    console.log('macOS');
}

// 判断是否为Windows 系统
else if (/win/i.test(appVersion)) {
    console.log('Windows');
}

// 判断是否为Linux 系统
else if (/linux/i.test(appVersion)) {
    console.log('Linux');
}

// 判断是否为iPhone 设备
else if (/iphone/i.test(appVersion)) {
    console.log('iPhone');
}

// 判断是否为iPad 设备
else if (/ipad/i.test(appVersion)) {
    console.log('iPad');
}

// 判断是否为Android 设备
else if (/android/i.test(appVersion)) {
    console.log('Android');
}

// 判断是否为ios 系统
else if (/ios/i.test(appVersion)) {
    console.log('iOS');
}

在上面的代码中，我们同样获取了navigator.appVersion信息，并将其转换为小写字符。之后分别通过正则表达式匹配操作系统和设备信息，最后输出相应信息。此段代码适用于macOS、Windows、Linux、iPhone、iPad、Android和iOS等主流系统。

以上就是使用JavaScript获取、判断浏览器版本信息的简单方法，通过以上方法可以很方便的获取到浏览器版本和操作系统信息，以便开发者可以作出相应处理。