Problem
For Firefox, Chrome, Internet Explorer, Opera, and Safari, I have 5 addons/extensions.
How can I recognize the user’s browser and guide them to get the appropriate addon (after they click the install button)?
Asked by FrankC
Solution #1
String representing the user agent. This method is unreliable because spoofing this value is simple. By duck-typing, I’ve created a way for detecting browsers.
Use the browser detection approach only when it’s absolutely necessary, such as when displaying browser-specific installation instructions for an extension. When feasible, use feature detection.
Demo: https://jsfiddle.net/6spj1059/
To detect the browser, the prior technique relied on rendering engine properties (-moz-box-sizing and -webkit-transform). Because these prefixes will soon be eliminated, I switched to browser-specific attributes to improve detection:
Answered by 25 revs, 16 users 39%
Solution #2
To check your browser version, try the methods below.
<!DOCTYPE html>
<html>
<body>
<p>What is the name(s) of your browser?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )
{
alert('Opera');
}
else if(navigator.userAgent.indexOf("Edg") != -1 )
{
alert('Edge');
}
else if(navigator.userAgent.indexOf("Chrome") != -1 )
{
alert('Chrome');
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
alert('Safari');
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
alert('Firefox');
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
alert('IE');
}
else
{
alert('unknown');
}
}
</script>
</body>
</html>
If you only need to know the version of Internet Explorer, use the code below. This code is compatible with Internet Explorer 6 through 11.
<!DOCTYPE html>
<html>
<body>
<p>Click on Try button to check IE Browser version.</p>
<button onclick="getInternetExplorerVersion()">Try it</button>
<p id="demo"></p>
<script>
function getInternetExplorerVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var rv = -1;
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
//For IE 11 >
if (navigator.appName == 'Netscape') {
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1);
alert(rv);
}
}
else {
alert('otherbrowser');
}
}
else {
//For < IE11
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
return false;
}}
</script>
</body>
</html>
Answered by Nimesh
Solution #3
I know it’s probably overkill to utilize a library for that, but just to add to the discussion, here’s how is.js does it:
is.firefox();
is.ie(6);
is.not.safari();
Answered by Rafael Eyng
Solution #4
As of December 2019, there are numerous notable libraries that handle browser detection.
*works with Edge, which is based on Chromium.
Answered by KyleMit
Solution #5
I’ve turned Rob W’s answer into a function that returns the browser string rather than having numerous variables flying around, in case anyone finds this useful. Because the browser can’t truly change without reloading, I’ve made it cache the result so it doesn’t have to figure it out again the next time the function is called.
Answered by Will Squire
Post is based on https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser