极客教程如何使用JavaScript检测用户浏览器（Safari、Chrome、IE、Firefox和Opera）
可以使用JavaScript来检查当前打开页面的浏览器。
navigator对象的userAgent属性用于返回浏览器发送的用户代理头字符串。这个用户代理字符串包含有关浏览器的信息，包括一些关键字，可以检测这些关键字是否存在。
可以使用indexOf()方法来检测特定的用户字符串。indexOf()方法用于返回字符串中指定字符串值的第一个匹配项。如果值不存在于字符串中，则返回“-1”。
可以使用navigator.userAgent属性来访问浏览器的用户代理字符串，然后将其存储在一个变量中。逐个检测这个用户代理字符串中的每个浏览器字符串的存在。
- 检测Chrome浏览器： Chrome浏览器的用户代理是“Chrome”。将这个值传递给indexOf()方法，在用户代理字符串中检测这个值。
由于indexOf()方法返回的值大于“-1”来表示搜索成功，因此使用“大于”运算符来返回一个布尔值，表示搜索是否成功。对于所有以下测试都是这样做的。
// 检测Chrome
let chromeAgent = userAgentString.indexOf("Chrome") > -1;
- 检测Internet Explorer浏览器： Internet Explorer浏览器的用户代理是“MSIE”或“rv:”。将这两个值传递给indexOf()方法，在用户代理字符串中检测这个值，并将两者的结果与OR运算符结合使用。
// 检测Internet Explorer
let IExplorerAgent = userAgentString.indexOf("MSIE") > -1 ||
userAgentString.indexOf("rv:") > -1;
- 检测Firefox浏览器： Firefox浏览器的用户代理是“Firefox”。将这个值传递给indexOf()方法，在用户代理字符串中检测这个值。
// 检测Firefox
let firefoxAgent = userAgentString.indexOf("Firefox") > -1;
- 检测Safari浏览器： Safari浏览器的用户代理是“Safari”。将这个值传递给indexOf()方法，在用户代理字符串中检测这个值。
在Safari浏览器的情况下，还需要进行额外的检查，因为Chrome浏览器的用户代理也包括Safari浏览器的用户代理。如果Chrome和Safari的用户代理都在用户代理中存在，那么意味着浏览器是Chrome，因此Safari浏览器的值被丢弃。
// 检测Safari
let safariAgent = userAgentString.indexOf("Safari") > -1;
// 丢弃Safari，因为它也匹配Chrome
if ((chromeAgent) && (safariAgent)) safariAgent = false;
- 检测Opera浏览器： Opera浏览器的用户代理是“OP”。将这个值传递给indexOf()方法，在用户代理字符串中检测这个值。
在这个浏览器的情况下，还需要进行额外的检查，因为Opera浏览器的用户代理也包括Chrome浏览器的用户代理。如果Chrome和Opera的用户代理都在用户代理中存在，那么意味着浏览器是Opera，因此Chrome浏览器的值被丢弃。
// 检测Opera
let operaAgent = userAgentString.indexOf("OP") > -1;
// 丢弃Chrome，因为它也匹配Opera
if ((chromeAgent) && (operaAgent)) chromeAgent = false;
示例：
<!DOCTYPE html>
<html>
<head>
<title>
How to detect Safari, Chrome, IE, Firefox
and Opera browser using JavaScript?
</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>
How to detect Safari, Chrome, IE, Firefox
and Opera browser using JavaScript?
</b>
<p>
Click on the button to detect
the current browser
</p>
<p>
Is Safari?
<span class="output-safari"></span>
</p>
<p>
Is Chrome?
<span class="output-chrome"></span>
</p>
<p>
Is Internet Explorer?
<span class="output-ie"></span>
</p>
<p>
Is Firefox?
<span class="output-firefox"></span>
</p>
<p>
Is Opera browser?
<span class="output-opera"></span>
</p>
<button onclick="checkBrowser()">
Detect browser
</button>
<script>
function checkBrowser() {
// Get the user-agent string
let userAgentString =
navigator.userAgent;
// Detect Chrome
let chromeAgent =
userAgentString.indexOf("Chrome") > -1;
// Detect Internet Explorer
let IExplorerAgent =
userAgentString.indexOf("MSIE") > -1 ||
userAgentString.indexOf("rv:") > -1;
// Detect Firefox
let firefoxAgent =
userAgentString.indexOf("Firefox") > -1;
// Detect Safari
let safariAgent =
userAgentString.indexOf("Safari") > -1;
// Discard Safari since it also matches Chrome
if ((chromeAgent) && (safariAgent))
safariAgent = false;
// Detect Opera
let operaAgent =
userAgentString.indexOf("OP") > -1;
// Discard Chrome since it also matches Opera
if ((chromeAgent) && (operaAgent))
chromeAgent = false;
document.querySelector(".output-safari").textContent
= safariAgent;
document.querySelector(".output-chrome").textContent
= chromeAgent;
document.querySelector(".output-ie").textContent
= IExplorerAgent;
document.querySelector(".output-opera").textContent
= operaAgent;
document.querySelector(".output-firefox").textContent
= firefoxAgent;
}
</script>
</body>
</html>
输出：
- Chrome浏览器上的输出：
- Firefox浏览器上的输出：
- Opera浏览器上的输出：
