JavaScript 判断浏览器类型与版本实现方案
作者:小圆点时间:2026-10-23 15:55:59浏览:542
本文介绍如何使用 JavaScript 解析 navigator.userAgent 字符串来识别浏览器类型及版本号。通过正则匹配与特征词判断,可区分 IE、Firefox、Chrome、Safari 等主流浏览器,并针对 IE 系列(含 Edge 及 IE11)提供详细的版本检测逻辑,同时包含针对低版本 IE 的兼容处理示例。
浏览器类型识别逻辑
本文详细讲解了利用 JavaScript 检测浏览器版本的方法,文中提供了具体的代码示例,对学习和工作具有参考意义。
浏览器类型识别
检测逻辑不涵盖 IE9 以下的旧版浏览器。
function getBrowserType(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var browser='unknown';
if (userAgent.indexOf("IE")!=-1) {
browser="IE";
}else if(userAgent.indexOf('Firefox')!=-1){
browser="Firefox";
}else if(userAgent.indexOf('OPR')!=-1){
browser="Opera";
}else if(userAgent.indexOf('Chrome')!=-1){
browser="Chrome";
}else if(userAgent.indexOf('Safari')!=-1){
browser="Safari";
}else if(userAgent.indexOf('Trident')!=-1){
browser='IE 11';
}
return browser;
}
测试环节

IE 系列版本检测实现
针对 IE 浏览器进行版本判定
检测范围涵盖 Edge、IE11、IE10、IE9、IE8、IE7、IE6、IE5 及 IE4。
// 获取IE版本
function IEVersion() {
// 取得浏览器的userAgent字符串
var userAgent = navigator.userAgent;
// 判断是否为小于IE11的浏览器
var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
// 判断是否为IE的Edge浏览器
var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
// 判断是否为IE11浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
if (isLessIE11) {
var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
// 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分,,这一步不可省略!!!
IEReg.test(userAgent);
// 取正则表达式中第一个小括号里匹配到的值
var IEVersionNum = parseFloat(RegExp['$1']);
if (IEVersionNum === 7) {
// IE7
return 7
} else if (IEVersionNum === 8) {
// IE8
return 8
} else if (IEVersionNum === 9) {
// IE9
return 9
} else if (IEVersionNum === 10) {
// IE10
return 10
} else {
// IE版本<7
return 6
}
} else if (isEdge) {
// edge
return 'edge'
} else if (isIE11) {
// IE11
return 11
} else {
// 不是ie浏览器
return -1
}
}
浏览器型号与版本号综合判断
识别浏览器具体型号及对应版本号
function getBroswerAndVersion(){
var os = navigator.platform;
var userAgent = navigator.userAgent;
var info = "";
var tempArray = "";
//判断浏览器版本
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);
if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) {
tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent);
info += tempArray[1] + tempArray[2];
} else if (isIE) {
var version = "";
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7)
{ version = "IE7"; }
else if (fIEVersion == 8)
{ version = "IE8"; }
else if (fIEVersion == 9)
{ version = "IE9"; }
else if (fIEVersion == 10)
{ version = "IE10"; }
else
{ version = "0" }
info += version;
} else if (isEdge) {
info += "Edge";
} else if (isIE11) {
info += "IE11";
} else if (/[Cc]hrome\/\d+/.test(userAgent)) {
tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent);
info += tempArray[1] + tempArray[2];
} else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent);
info += tempArray[3] + tempArray[1];
} else if (/[Oo]pera.+[Vv]ersion\/\d+\.\d+/.test(userAgent)) {
tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent);
info += tempArray[1] + tempArray[2];
} else {
info += "unknown";
}
return info;
}
低版本 IE 兼容处理
针对低于 IE9 版本的浏览器发出提醒
<!--[if lte IE 9]>
<script>
var bro = getBroswerAndVersion();
if(bro=="IE5" || bro=="IE6" || bro=="IE7" || bro=="IE8" ){
alert("浏览器版本过低!请升级至IE9以上");
}
</script>
<![endif]-->
以上内容为本文的全部总结,希望能为读者提供有益的帮助,欢迎继续支持本站。
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
