JavaScript 检测浏览器类型与操作系统实现解析
本文详细解析如何利用 JavaScript 的 navigator 对象属性判断浏览器类型及操作系统。通过解析 userAgent 字符串,可区分 IE、Chrome、Firefox 等主流浏览器,并识别 Windows、Mac 及 Android 平台。文中提供了具体的正则匹配代码示例与在线检测工具参考。
JavaScript 浏览器与系统检测概述
本文通过具体实例介绍在 JavaScript 中判断浏览器类型与操作系统的方法,供读者参考学习。
navigator.userAgent 是一个只读字符串属性,它包含了浏览器用于 HTTP 请求的用户代理头信息。
navigator.platform 同样为只读字符串,用于声明运行浏览器的操作系统或硬件平台信息。
浏览器类型判断实现
以下是判断具体浏览器类型的方法。
针对 IE 浏览器的检测逻辑。
ie = ua.match( /MSIE\s([\d\.]+)/ ) || ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),
获取 IE 浏览器具体版本号的方法。
/msie 8.0/.test(navigator.userAgent.toLowerCase())
判断当前环境是否为微信内置浏览器。
/micromessenger/.test(navigator.userAgent.toLowerCase())
判断当前浏览器是否为 Chrome。
/chrome/.test(navigator.userAgent.toLowerCase())
判断当前浏览器是否为 Firefox。
/safari/.test(navigator.userAgent.toLowerCase())
判断当前浏览器是否为 Opera。
/micromessgenger/.test(navigator.userAgent.toLowerCase())
操作系统类型判断实现
接下来介绍如何判断操作系统类型。
判断当前是否为 Windows 操作系统。
navigator.platform == "Win32"
navigator.platform == "Windows"
判断当前是否为 Mac 操作系统。
navigator.platform == "Mac68K"
navigator.platform == "MacPPC"
navigator.platform == "Macintosh"
navigator.platform == "MacIntel"
判断当前是否为 Android 操作系统。
if(/Linux/i.test(navigator.userAgent)){
if(/android/i.test(navigator.userAgent.toLowerCase())){
return "android";
}
}
/**
* @description 简单的浏览器检查结果。
*
* * `webkit` webkit版本号,如果浏览器为非webkit内核,此属性为`undefined`。
* * `chrome` chrome浏览器版本号,如果浏览器为chrome,此属性为`undefined`。
* * `ie` ie浏览器版本号,如果浏览器为非ie,此属性为`undefined`。**暂不支持ie10+**
* * `firefox` firefox浏览器版本号,如果浏览器为非firefox,此属性为`undefined`。
* * `safari` safari浏览器版本号,如果浏览器为非safari,此属性为`undefined`。
* * `opera` opera浏览器版本号,如果浏览器为非opera,此属性为`undefined`。
*
* @property {Object} [browser]
*/
browser: (function( ua ) {
var ret = {},
webkit = ua.match( /WebKit\/([\d.]+)/ ),
chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
ua.match( /CriOS\/([\d.]+)/ ),
ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),
firefox = ua.match( /Firefox\/([\d.]+)/ ),
safari = ua.match( /Safari\/([\d.]+)/ ),
opera = ua.match( /OPR\/([\d.]+)/ );
webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
ie && (ret.ie = parseFloat( ie[ 1 ] ));
firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
safari && (ret.safari = parseFloat( safari[ 1 ] ));
opera && (ret.opera = parseFloat( opera[ 1 ] ));
return ret;
})( navigator.userAgent ),
/**
* @description 操作系统检查结果。
*
* * `android` 如果在android浏览器环境下,此值为对应的android版本号,否则为`undefined`。
* * `ios` 如果在ios浏览器环境下,此值为对应的ios版本号,否则为`undefined`。
* @property {Object} [os]
*/
os: (function( ua ) {
var ret = {},
// osx = !!ua.match( /\(Macintosh\; Intel / ),
android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
// osx && (ret.osx = true);
android && (ret.android = parseFloat( android[ 1 ] ));
ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
return ret;
})( navigator.userAgent ),
此外,还提供以下相关在线工具供进一步参考:
在线浏览器信息检测工具:http://tools.jb51.net/aideddesign/browser_info
常用浏览器(PC,移动) user-agent 对照表:http://tools.jb51.net/table/useragent
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家 JavaScript 程序设计有所帮助。
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工:HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象:自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手:安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
