📅 最后修改于: 2023-12-03 14:53:11.861000 🧑 作者: Mango
在前端开发中，经常需要针对不同的浏览器进行优化或特殊处理。因此，如何检测浏览器类型就成为一个必须要掌握的技能。
下面介绍几种检测浏览器类型的方法。
navigator.userAgent 字符串中包含了浏览器的信息，因此可以通过这个字符串来判断浏览器的类型。
示例代码：
const ua = navigator.userAgent.toLowerCase();
const isSafari = ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
const isChrome = ua.indexOf('chrome') !== -1;
const isIE = ua.indexOf('trident') !== -1 || ua.indexOf('msie') !== -1;
const isFirefox = ua.indexOf('firefox') !== -1;
const isOpera = ua.indexOf('opera') !== -1 || ua.indexOf('opr') !== -1;
解读代码：
首先，获取当前浏览器的 userAgent 字符串，经过小写化处理后，分别判断字符串中是否包含 Safari、Chrome、IE、Firefox 和 Opera 的关键字。
注意，由于使用了 indexOf 方法，可能会出现误判的情况，比如在 Chrome 中也包含有 Safari 的关键字。因此需要判断是否同时包含 Chrome 和 Safari 的关键字，如果同时包含，则说明是 Chrome。
返回值：
isSafari：是否为 Safari 浏览器。
isChrome：是否为 Chrome 浏览器。
isIE：是否为 IE 浏览器。
isFirefox：是否为 Firefox 浏览器。
isOpera：是否为 Opera 浏览器。
在新的 Web API 中，window.navigator 对象提供了一个新的属性 userAgentData，可以获取到更加详细的浏览器信息。该属性返回的是一个 Promise 对象，需要使用 await 或 then 方法来获取数据。
示例代码：
(async () => {
const uaData = await navigator.userAgentData;
const brands = uaData.brands;
for (let i = 0; i < brands.length; i++) {
const brand = brands[i];
const browser = brand.brand;
const version = brand.version;
console.log(`browser: ${browser}, version: ${version}`);
}
})();
解读代码：
首先，使用 await 关键字等待 userAgentData 属性，然后获取当前浏览器的品牌信息数组 brands。遍历 brands 数组，获取每个品牌的名称和版本信息，并打印输出。
返回值：
brands：包含当前浏览器品牌信息的数组，每个品牌信息包含品牌名称和版本号。
在 HTML 标记上添加特定的 class 名称，然后使用 JavaScript 检测该 class 名称是否存在。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>检测浏览器类型</title>
<style type="text/css">
.safari .result { color: green; }
.chrome .result { color: blue; }
.ie .result { color: red; }
.firefox .result { color: purple; }
.opera .result { color: orange; }
</style>
</head>
<body>
<div class="safari">
<p>Safari 浏览器</p>
<div class="result">这是在 Safari 浏览器中打开的页面</div>
</div>
<div class="chrome">
<p>Chrome 浏览器</p>
<div class="result">这是在 Chrome 浏览器中打开的页面</div>
</div>
<div class="ie">
<p>IE 浏览器</p>
<div class="result">这是在 IE 浏览器中打开的页面</div>
</div>
<div class="firefox">
<p>Firefox 浏览器</p>
<div class="result">这是在 Firefox 浏览器中打开的页面</div>
</div>
<div class="opera">
<p>Opera 浏览器</p>
<div class="result">这是在 Opera 浏览器中打开的页面</div>
</div>
<script type="text/javascript">
const ua = navigator.userAgent.toLowerCase();
const isSafari = ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
const isChrome = ua.indexOf('chrome') !== -1;
const isIE = ua.indexOf('trident') !== -1 || ua.indexOf('msie') !== -1;
const isFirefox = ua.indexOf('firefox') !== -1;
const isOpera = ua.indexOf('opera') !== -1 || ua.indexOf('opr') !== -1;
if (isSafari) {
document.documentElement.classList.add('safari');
} else if (isChrome) {
document.documentElement.classList.add('chrome');
} else if (isIE) {
document.documentElement.classList.add('ie');
} else if (isFirefox) {
document.documentElement.classList.add('firefox');
} else if (isOpera) {
document.documentElement.classList.add('opera');
}
</script>
</body>
</html>
解读代码：
首先，通过获取当前浏览器的 userAgent 字符串来判断浏览器类型。然后，将对应的 class 名称添加到 documentElement（即 html 标签）上，比如在 Safari 中，就添加 safari class 名称。
在 CSS 样式中，针对不同的 class 名称添加不同的样式。
返回值：
根据不同的浏览器类型，添加对应的 class 名称到 html 标记上。
以上就是几种检测浏览器类型的方法，供开发者参考使用。