JavaScript 获取与判断浏览器版本信息的两种方法
本文介绍在 JavaScript 中获取和判断浏览器类型及版本的两种常用方法。第一种通过分析 navigator.userAgent 字符串特征进行识别,适用于大多数现代浏览器;第二种利用各浏览器独有的 API 特性(如 ActiveXObject、getBoxObjectFor 等)进行区分。文章提供了具体的代码示例,并指出版本信息通常需从 UserAgent 中解析,最后总结了处理浏览器兼容性的基本思路。
Navigator 对象属性概览
Navigator 对象包含了关于当前浏览器的详细信息。
•appCodeName -- 表示浏览器代码名的字符串
•appName -- 表示官方浏览器名称的字符串
•appVersion -- 表示浏览器版本信息的字符串
•cookieEnabled -- 若启用 Cookie 则返回 true,否则返回 false
•javaEnabled -- 若启用 Java 则返回 true,否则返回 false
•platform -- 表示浏览器所在计算机操作系统的字符串
•plugins -- 返回安装在浏览器中的插件数组
•taintEnabled -- 若启用数据污点(data tainting)则返回 true,否则返回 false
•userAgent -- 表示用户代理头(User Agent Header)的字符串
在 navigator 对象中,userAgent 属性最为关键,它返回包含浏览器版本等详细信息的字符串。
cookieEnabled 属性同样重要,利用它可以判断用户浏览器是否已开启 Cookie 功能。
在 JavaScript 中判断浏览器类型通常有两种方式:一是依据各种浏览器独有的属性进行区分;二是通过分析浏览器的 userAgent 属性来判断(其中,版本信息只能通过分析 userAgent 获取)。
只有同时确定了浏览器类型和具体版本,才能有效处理相关的兼容性问题。
基于 UserAgent 的浏览器识别方法
1、通过解析 userAgent 中的特征字符串来判断浏览器类型及版本(这是常用且相对稳妥的做法)
UserAgent 解析代码示例
function getBrowserInfo() {
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if(Sys.ie) {
return 'IE: ' + Sys.ie;
}
if(Sys.firefox) {
return 'Firefox: ' + Sys.firefox;
}
if(Sys.chrome) {
return 'Chrome: ' + Sys.chrome;
}
if(Sys.opera) {
return 'Opera: ' + Sys.opera;
}
if(Sys.safari) {
return 'Safari: ' + Sys.safari;
}
}
var browser = getBrowserInfo() ;
var verinfo = (browser+"").replace(/[^0-9.]/ig, ""); // 版本号
注意:部分浏览器的 userAgent 属性值中同时包含 Chrome 和 Safari 标识,这是因为 Chrome 的 userAgent 中保留了 Safari 的特征,这或许也是 Chrome 能够运行 Safari 浏览器应用的基础原因。
基于浏览器独有特性的识别方法
2、通过识别各浏览器的独有特性来分辨浏览器(需注意:这些特性可能会随浏览器版本更新而变化,或者被其他浏览器引入,从而导致判断失效)。
IE:只有 IE 支持创建 ActiveX 控件,因此 ActiveXObject 函数是其他浏览器所不具备的。只需判断 window 对象中是否存在 ActiveXObject 函数,即可明确判定当前浏览器为 IE。
Firefox:在 Firefox 中,DOM 元素拥有一个 getBoxObjectFor 函数,用于获取该 DOM 元素的位置和大小。这是 Firefox 独有的特性,通过判断它即可识别当前浏览器为 Firefox。(注:IE 中对应的函数是 getBoundingClientRect)。
Opera:Opera 提供了专门的浏览器标识,即 window.opera 属性。
Safari:openDatabase 函数是其他浏览器所没有的,可作为判断 Safari 浏览器的标志。
Chrome:与 Firefox 一样,Chrome 拥有 MessageEvent 函数,但它并不具备 Firefox 的 getBoxObjectFor 函数。结合这两个条件即可判断当前浏览器为 Chrome。
特性检测代码示例
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if(window.ActiveXObject) {
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
}else if(document.getBoxObjectFor) {
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
}else if(window.MessageEvent && !document.getBoxObjectFor) {
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
}else if(window.opera) {
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
}else if(window.openDatabase) {
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
}
受限于作者水平,文中难免存在错误或不妥之处,欢迎批评指正及评论建议。文章将不定期进行修改和完善,谢谢!
以上这篇关于 JS 获取和判断浏览器版本信息的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
