要检测浏览器类型和版本，我们可以使用JavaScript中的navigator对象。该对象提供了关于浏览器的详细信息，包括应用程序名称、代码名称、浏览器版本、当前操作系统和语言等。
以下是使用JavaScript检测浏览器类型和版本的代码：
// 检测浏览器类型和版本的代码
const getBrowserInfo = () => {
const ua = navigator.userAgent; // 获取用户代理
let browser = {}; // 存储浏览器信息
let tem; // 临时变量
let match = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; // 匹配浏览器信息
if (/trident/i.test(match[1])){ // 判断是否为IE浏览器
tem = /\brv[ :]+(\d+)/g.exec(ua) || []; // 匹配IE浏览器版本
return { browser: 'IE', version: (tem[1] || '') };
}
if (match[1] === 'Chrome'){ // 判断是否为Chrome浏览器
tem = ua.match(/\bOPR\/(\d+)/); // 匹配Opera浏览器版本
if (tem !== null) { // 判断是否为Opera浏览器
return { browser: 'Opera', version: tem[1] };
}
}
match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null){ // 匹配Safari和Opera浏览器版本
match.splice(1, 1, tem[1]);
}
browser.name = match[0]; // 获取浏览器名称
browser.version = match[1]; // 获取浏览器版本
return browser;
}
// 调用浏览器检测函数
console.log(getBrowserInfo());
上述代码使用正则表达式匹配浏览器类型和版本。当匹配一个特定的用户代理时，代码将返回一个对象，其中包含浏览器名称和版本号。
下面是另一个检测浏览器类型和版本的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>检测浏览器类型和版本的示例</title>
</head>
<body>
<h1>检测浏览器类型和版本的示例</h1>
<script>
var browser = { // 定义浏览器信息
ie: false,
firefox: false,
chrome: false,
opera: false
};
var ua = window.navigator.userAgent; // 获取用户代理
if (/Trident/.test(ua)) { // 匹配IE浏览器
browser.ie = ua.match(/rv:([\d.]+)/)[1];
} else if (/Firefox/.test(ua)) { // 匹配Firefox浏览器
browser.firefox = ua.match(/Firefox\/([\d.]+)/)[1];
} else if (/Chrome/.test(ua)) { // 匹配Chrome浏览器
browser.chrome = ua.match(/Chrome\/([\d.]+)/)[1];
} else if (/Opera/.test(ua)) { // 匹配Opera浏览器
browser.opera = ua.match(/Opera\/([\d.]+)/)[1];
}
console.log(browser); // 输出浏览器信息
</script>
</body>
</html>
上面的代码使用正则表达式匹配浏览器类型和版本，然后将结果存储在一个对象中，并在控制台中输出浏览器信息。
本文链接：http://task.lmcjl.com/news/8685.html