JavaScript 检测浏览器类型与版本的方法

浏览器类型与版本检测概述

以下 checkBrowser() 函数主要用于识别三种主流浏览器：Internet Explorer、Firefox 和 Chrome。其他浏览器的检测逻辑可根据实际需求自行补充。

HTML 页面结构

HTML 结构部分：在页面加载完成后自动执行检测函数。

 
<body onload="checkBrowser()">
<p id="userAgent"></p>
<p id="browser"></p>
</body>

JavaScript 检测逻辑实现

JavaScript 实现部分：

检测的核心原理是从 navigator.userAgent 属性中提取用户代理信息，进而获取浏览器类型和版本数据。利用正则表达式进行匹配可以高效满足需求。若对正则表达式不熟悉，可参考相关文档。

 
function check(reg) {
var ug = navigator.userAgent.toLowerCase();
return reg.test(ug);
} 
function checkBrowser() {
var ug = navigator.userAgent.toLowerCase();
var userAgent = document.getElementById("userAgent");
userAgent.innerHTML = "浏览器的用户代理报头：" + ug;
var browserType = "";
var ver = "";
// 检测 IE 浏览器及其版本
var IE = ug.match(/msie\s*\d\.\d/); // 提取浏览器类型及版本信息，注意 match() 方法返回的是数组而非字符串
var isIE = check(/msie/);
if(isIE) {
browserType = "Internet Explorer";
ver = IE.join(" ").match(/[0-9]/g).join("."); // 先使用 join() 将数组转为字符串，再通过 match() 匹配数字，最后用 join(".") 组合成版本号
} 
// 检测 Chrome 浏览器及其版本
var chrome = ug.match(/chrome\/\d\.\d/gi);
var isChrome = check(/chrome/);
if(isChrome) {
browserType = "Chrome";
ver = chrome.join(" ").match(/[0-9]/g).join(".");
} 
// 检测 Firefox 浏览器及其版本
var firefox = ug.match(/firefox\/\d\.\d/gi);
var isFirefox = check(/firefox/);
if(isFirefox) {
browserType = "Firefox";
ver = firefox.join(" ").match(/[0-9]/g).join(".");
} 
var browser = document.getElementById("browser");
browser.innerHTML = "您正在使用的浏览器为：" + browserType + "<span style='padding-left:15px;'>版本为：</span>" + ver;
}