js获取浏览器信息及版本（兼容IE）

admin管理员组

文章数量:1530013

文章目录

• 一、获取浏览器信息
• 二、navigator对象
• • 常见的`navigator`属性
  • 功能检测
  • 隐私和安全
  • 结论
• 三、userAgent属性
• 四、热门文章

一、获取浏览器信息

在JavaScript中，获取浏览器信息及其版本通常依赖于navigator对象，这是一个包含了有关浏览器的信息的对象。但是，请注意，出于隐私和安全考虑，现代浏览器限制了通过navigator对象可获取的信息量，并且不同浏览器厂商对navigator对象的实现可能有所不同。

尽管如此，你仍然可以通过navigator.userAgent字符串来尝试获取浏览器的名称和版本信息。userAgent字符串包含了由客户机发送服务器的user-agent头部的值，它通常包含浏览器的名称、版本、操作系统等信息。

以下是一个示例函数，它尝试从navigator.userAgent字符串中解析出浏览器的名称和版本：

function getBrowserInfo() {
    let userAgent = navigator.userAgent;
    let browserName = '';
    let browserVersion = '';

    // 尝试匹配常见的浏览器名称和版本
    if (/MSIE|Trident/.test(userAgent)) {
        // 匹配旧版IE浏览器
        let matches = /MSIE\s(\d+\.\d+)/.exec(userAgent) || /rv:(\d+\.\d+)/.exec(userAgent);
        if (matches) {
            browserName = 'IE';
            browserVersion = matches[1];
        }
    } else if (/Edge/.test(userAgent)) {
        // 匹配Edge浏览器
        let matches = /Edge\/(\d+\.\d+)/.exec(userAgent);
        if (matches) {
            browserName = 'Edge';
            browserVersion = matches[1];
        }
    } else if (/Chrome/.test(userAgent) && /Google Inc/.test(navigator.vendor)) {
        // 匹配Chrome浏览器
        let matches = /Chrome\/(\d+\.\d+)/.exec(userAgent);
        if (matches) {
            browserName = 'Chrome';
            browserVersion = matches[1];
        }
    } else if (/Firefox/.test(userAgent)) {
        // 匹配Firefox浏览器
        let matches = /Firefox\/(\d+\.\d+)/.exec(userAgent);
        if (matches) {
            browserName = 'Firefox';
            browserVersion = matches[1];
        }
    } else if (/Safari/.test(userAgent) && /Apple Computer/.test(navigator.vendor)) {
        // 匹配Safari浏览器
        let matches = /Version\/(\d+\.\d+)([^S]*)(Safari)/.exec(userAgent);
        if (matches) {
            browserName = 'Safari';
            browserVersion = matches[1];
        }
    }

    return {
        browserName: browserName,
        browserVersion: browserVersion
    };
}

console.log(getBrowserInfo());

注意：

1. 由于userAgent字符串可以被用户或浏览器扩展修改，因此它并不总是可靠的。
2. 现代Web开发通常推荐采用功能检测（feature detection）而非浏览器检测（browser detection）来编写代码，以确保代码的可移植性和未来兼容性。
3. 随着时间的推移，新的浏览器和浏览器版本不断出现，上述函数可能需要更新以包含新的匹配规则。
4. 考虑到隐私和安全，一些现代浏览器（如Chrome）正在限制或隐藏navigator.userAgent中的某些信息。

二、navigator对象

navigator对象是Web API的一部分，它包含了有关浏览器的信息。这个对象提供了很多属性和方法，但出于隐私和安全的考虑，现代浏览器对navigator对象的信息访问进行了限制。尽管如此，navigator对象仍然是Web开发中识别浏览器特性和进行功能检测的一个重要工具。

常见的navigator属性

以下是一些常见的navigator属性，这些属性提供了关于浏览器和客户端环境的信息：

• navigator.userAgent：返回一个由客户机发送服务器的user-agent头部的值。这个字符串通常包含了浏览器的名称、版本、操作系统等信息，但请注意，这个字符串是可以被用户或浏览器扩展修改的，因此不一定完全可靠。
• navigator.platform：返回运行浏览器的操作系统及版本的字符串表示。但是，这个属性也可以被伪造，因此不建议用于安全相关的决策。
• navigator.language：返回浏览器的主语言。这通常是用户首选的语言，用于决定网页内容的语言。
• navigator.onLine：返回一个布尔值，指示浏览器是否连接到互联网。但是，这个属性可能会受到浏览器缓存或其他因素的影响，因此不总是准确的。
• navigator.geolocation：提供了访问地理位置信息的接口（如果可用）。这是一个只读属性，返回一个Geolocation对象，用于获取用户的地理位置。
• navigator.mediaDevices：返回一个MediaDevices对象，提供了访问用户媒体输入设备（如摄像头和麦克风）的接口。

功能检测

虽然navigator对象提供了一些有用的信息，但现代Web开发更倾向于使用功能检测（feature detection）而不是浏览器检测（browser detection）。功能检测是一种检查浏览器是否支持特定功能或API的方法，而不是检查浏览器的名称或版本。这种方法更加灵活和可靠，因为它直接测试了浏览器的能力，而不是依赖于可能不准确或已经过时的浏览器信息。

隐私和安全

随着Web隐私和安全性的日益重要，浏览器制造商正在限制通过navigator对象可访问的信息量。例如，一些浏览器开始减少或修改navigator.userAgent字符串中包含的信息，以减少对用户隐私的潜在影响。因此，在开发Web应用时，应该考虑到这些变化，并尽量使用功能检测而不是浏览器检测来确定如何为用户提供最佳体验。

结论

navigator对象是Web开发中一个重要的工具，它提供了关于浏览器和客户端环境的信息。然而，由于隐私和安全的考虑，以及现代Web开发的最佳实践，开发者应该谨慎使用这些信息，并优先考虑功能检测而不是浏览器检测。

三、userAgent属性

userAgent字符串（也称为User-Agent header或简称UA字符串）是一个在HTTP请求中发送给服务器的头部字段。这个字符串由用户代理（即浏览器或其他访问网站的客户端软件）发送，用于标识发起请求的浏览器类型、版本、操作系统、CPU类型、渲染引擎等详细信息。服务器可以使用这些信息来定制响应，例如提供特定于浏览器或操作系统的内容或功能。

然而，需要注意的是，由于userAgent字符串可以被用户或浏览器扩展修改，因此它并不总是完全可靠或准确的。此外，随着隐私和安全性的日益重要，一些现代浏览器正在减少或修改userAgent字符串中包含的信息，以减少对用户隐私的潜在影响。

userAgent字符串通常包含以下类型的信息：

• 浏览器名称和版本
• 操作系统名称和版本
• 设备类型（如桌面、移动）
• 渲染引擎（如Gecko、Blink）
• 其他插件或扩展信息（尽管这越来越少见）

例如，一个典型的userAgent字符串可能看起来像这样：

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

这个字符串表明请求是由Chrome浏览器发出的，运行在Windows 10操作系统上，使用的是64位版本的Windows和Chrome浏览器，以及基于AppleWebKit的渲染引擎（实际上Chrome使用的是Blink，但Blink是WebKit的一个分支，所以这里仍然包含了WebKit的信息）。

四、热门文章

【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环

本文标签： 浏览器版本信息js