JavaScript 使用 navigator.userAgent 解析浏览器与系统类型

作者:像素漫游时间:2026-10-24 14:19:17浏览:288

本文详解如何利用 JavaScript 的 navigator.userAgent 属性识别客户端浏览器类型及操作系统。通过解析 HTTP 请求中的 User-Agent 字符串,封装通用函数以区分 Chrome、Safari、IE 等主流浏览器,并判断 iOS 或 Android 系统,为前端多浏览器兼容开发提供基础支持。

浏览器兼容性与 User-Agent 概述

浏览器是日常开发中不可或缺的工具,除了常见的 Firefox、Opera、Safari、IE 和 Chrome 之外,全球还存在近百种不同的浏览器。为了确保 Web 应用在不同环境下的正常运行,在开发阶段准确识别浏览器类型及操作系统至关重要。

User-Agent(用户代理)是 HTTP 请求头中用于标识客户端身份的字符串,通常包含浏览器名称、版本号以及操作系统等信息。其标准格式通常由应用名、斜杠及版本号组成,后续部分则遵循自由格式规范。

主流浏览器 User-Agent 示例

以下通过具体示例展示不同浏览器的 User-Agent 特征。

Chrome 浏览器

浏览器兼容性与 User-Agent 概述

iPhone 上的 Safari 浏览器

浏览器兼容性与 User-Agent 概述

Internet Explorer (IE) 浏览器

浏览器兼容性与 User-Agent 概述

封装浏览器与系统检测函数

基于上述分析,可以封装一个用于获取浏览器类型和操作系统的函数,并在需要检测环境的地方直接调用该函数即可。


// 各主流浏览器
function getBrowser() {
    var u = navigator.userAgent;
 
    var bws = [{
        name: 'sgssapp',
        it: /sogousearch/i.test(u)
    }, {
        name: 'wechat',
        it: /MicroMessenger/i.test(u)
    }, {
        name: 'weibo',
        it: !!u.match(/Weibo/i)
    }, {
        name: 'uc',
        it: !!u.match(/UCBrowser/i) || u.indexOf(' UBrowser') > -1
    }, {
        name: 'sogou',
        it: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1
    }, {
        name: 'xiaomi',
        it: u.indexOf('MiuiBrowser') > -1
    }, {
        name: 'baidu',
        it: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1
    }, {
        name: '360',
        it: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1
    }, {
        name: '2345',
        it: u.indexOf('2345Explorer') > -1
    }, {
        name: 'edge',
        it: u.indexOf('Edge') > -1
    }, {
        name: 'ie11',
        it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1
    }, {
        name: 'ie',
        it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1
    }, {
        name: 'firefox',
        it: u.indexOf('Firefox') > -1
    }, {
        name: 'safari',
        it: u.indexOf('Safari') > -1 && u.indexOf('Chrome') === -1
    }, {
        name: 'qqbrowser',
        it: u.indexOf('MQQBrowser') > -1 && u.indexOf(' QQ') === -1
    }, {
        name: 'qq',
        it: u.indexOf('QQ') > -1
    }, {
        name: 'chrome',
        it: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1
    }, {
        name: 'opera',
        it: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1
    }];
 
    for (var i = 0; i < bws.length; i++) {
        if (bws[i].it) {
            return bws[i].name;
        }
    }
 
    return 'other';
}
 
// 系统区分
function getOS() {
    var u = navigator.userAgent;
    if (!!u.match(/compatible/i) || u.match(/Windows/i)) {
        return 'windows';
    } else if (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) {
        return 'macOS';
    } else if (!!u.match(/iphone/i) || u.match(/Ipad/i)) {
        return 'ios';
    } else if (!!u.match(/android/i)) {
        return 'android';
    } else {
        return 'other';
    }
}

以上就是关于利用 JavaScript navigator.userAgent 获取浏览器信息的案例讲解,更多相关 JavaScript navigator.userAgent 获取浏览器信息内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章