在前端开发中，获取浏览器信息是适配不同运行环境、统计用户设备数据、处理兼容性问题的基础操作，js提供了原生的API支持开发者快速获取各类浏览器相关信息，核心依托于浏览器提供的navigator对象。
核心对象：navigator
navigator是浏览器提供的全局对象，包含了当前浏览器的所有基础信息，开发者可以直接通过window.navigator访问该对象，获取各类属性值。以下是常用的基础属性说明：
| 属性名 | 说明 |
|---|---|
| userAgent | 返回浏览器的用户代理字符串，包含浏览器版本、内核、操作系统等信息 |
| appName | 返回浏览器的名称，大部分现代浏览器返回Netscape |
| appVersion | 返回浏览器的版本信息 |
| platform | 返回浏览器运行的操作系统平台 |
| language | 返回浏览器的首选语言 |
| cookieEnabled | 返回浏览器是否启用cookie，值为布尔类型 |
基础信息获取脚本示例
以下是获取浏览器基础信息的完整脚本，直接调用即可返回对应的信息内容：
// 获取浏览器基础信息
function getBasicBrowserInfo() {
const navigator = window.navigator;
return {
// 浏览器用户代理字符串
userAgent: navigator.userAgent,
// 浏览器名称
appName: navigator.appName,
// 浏览器版本
appVersion: navigator.appVersion,
// 运行平台
platform: navigator.platform,
// 首选语言
language: navigator.language,
// 是否启用cookie
cookieEnabled: navigator.cookieEnabled
};
}
// 调用函数输出信息
const basicInfo = getBasicBrowserInfo();
console.log('浏览器基础信息：', basicInfo);
解析浏览器名称与版本
userAgent字符串包含了最完整的浏览器标识信息，但是内容较为复杂，需要解析才能得到具体的浏览器名称和版本，以下是解析主流浏览器信息的脚本：
// 解析浏览器名称和版本
function parseBrowserInfo() {
const ua = window.navigator.userAgent.toLowerCase();
let browserName = '未知浏览器';
let browserVersion = '未知版本';
// 判断Chrome浏览器
if (ua.indexOf('chrome') !== -1 && ua.indexOf('safari') !== -1) {
browserName = 'Chrome';
const match = ua.match(/chrome/([d.]+)/);
if (match) {
browserVersion = match[1];
}
}
// 判断Firefox浏览器
else if (ua.indexOf('firefox') !== -1) {
browserName = 'Firefox';
const match = ua.match(/firefox/([d.]+)/);
if (match) {
browserVersion = match[1];
}
}
// 判断Safari浏览器
else if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
browserName = 'Safari';
const match = ua.match(/version/([d.]+)/);
if (match) {
browserVersion = match[1];
}
}
// 判断Edge浏览器
else if (ua.indexOf('edg') !== -1) {
browserName = 'Edge';
const match = ua.match(/edg/([d.]+)/);
if (match) {
browserVersion = match[1];
}
}
// 判断IE浏览器
else if (ua.indexOf('trident') !== -1) {
browserName = 'IE';
const match = ua.match(/rv:([d.]+)/);
if (match) {
browserVersion = match[1];
}
}
return {
browserName,
browserVersion
};
}
// 调用函数输出解析结果
const browserInfo = parseBrowserInfo();
console.log('浏览器名称：', browserInfo.browserName);
console.log('浏览器版本：', browserInfo.browserVersion);
获取操作系统信息
除了浏览器本身的信息，还可以从userAgent中解析用户使用的操作系统信息，以下是解析操作系统的脚本示例：
// 解析操作系统信息
function parseOSInfo() {
const ua = window.navigator.userAgent.toLowerCase();
let osName = '未知操作系统';
if (ua.indexOf('windows') !== -1) {
osName = 'Windows';
} else if (ua.indexOf('mac') !== -1) {
osName = 'macOS';
} else if (ua.indexOf('linux') !== -1) {
osName = 'Linux';
} else if (ua.indexOf('android') !== -1) {
osName = 'Android';
} else if (ua.indexOf('ios') !== -1 || ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1) {
osName = 'iOS';
}
return osName;
}
// 调用函数输出操作系统信息
const osInfo = parseOSInfo();
console.log('操作系统：', osInfo);
完整整合脚本
将以上功能整合，可以得到一个完整的浏览器信息获取脚本，满足大部分场景的使用需求：
// 完整浏览器信息获取脚本
function getAllBrowserInfo() {
const navigator = window.navigator;
const ua = navigator.userAgent.toLowerCase();
// 基础信息
const basicInfo = {
userAgent: navigator.userAgent,
appName: navigator.appName,
appVersion: navigator.appVersion,
platform: navigator.platform,
language: navigator.language,
cookieEnabled: navigator.cookieEnabled
};
// 解析浏览器信息
let browserName = '未知浏览器';
let browserVersion = '未知版本';
if (ua.indexOf('chrome') !== -1 && ua.indexOf('safari') !== -1) {
browserName = 'Chrome';
const match = ua.match(/chrome/([d.]+)/);
if (match) browserVersion = match[1];
} else if (ua.indexOf('firefox') !== -1) {
browserName = 'Firefox';
const match = ua.match(/firefox/([d.]+)/);
if (match) browserVersion = match[1];
} else if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
browserName = 'Safari';
const match = ua.match(/version/([d.]+)/);
if (match) browserVersion = match[1];
} else if (ua.indexOf('edg') !== -1) {
browserName = 'Edge';
const match = ua.match(/edg/([d.]+)/);
if (match) browserVersion = match[1];
} else if (ua.indexOf('trident') !== -1) {
browserName = 'IE';
const match = ua.match(/rv:([d.]+)/);
if (match) browserVersion = match[1];
}
// 解析操作系统信息
let osName = '未知操作系统';
if (ua.indexOf('windows') !== -1) {
osName = 'Windows';
} else if (ua.indexOf('mac') !== -1) {
osName = 'macOS';
} else if (ua.indexOf('linux') !== -1) {
osName = 'Linux';
} else if (ua.indexOf('android') !== -1) {
osName = 'Android';
} else if (ua.indexOf('ios') !== -1 || ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1) {
osName = 'iOS';
}
return {
...basicInfo,
browserName,
browserVersion,
osName
};
}
// 调用整合函数输出所有信息
const allInfo = getAllBrowserInfo();
console.log('完整浏览器信息：', allInfo);
注意事项
- userAgent字符串可以被用户手动修改，因此获取的信息不能作为安全校验的依据，仅用于环境适配和统计场景。
- 不同浏览器的navigator属性存在一定差异，编写脚本时需要考虑兼容性，避免直接读取不存在的属性导致报错。
- 移动端浏览器的userAgent通常包含对应的设备标识，解析时可以根据需求扩展对应的设备信息获取逻辑。
js浏览器信息获取navigator对象userAgent脚本编写修改时间：2026-07-09 17:15:40