Menu
I have 5 addons/extensions for FF, Chrome, IE, Opera, and Safari.
How can I recognize the user browser and redirect (once an install button has been clicked) to download the corresponding addon?
318
In the browser window, hold the Alt key and press H to bring up the Help menu. Click About Google Chrome and locate the version at the top of the window that appears.
How do I detect the browser name ? You can use the navigator. appName and navigator. userAgent properties.
To check if browser is Google Chrome:var isChrome = navigator. userAgent. includes("Chrome") && navigator. vendor.
The idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do support the feature, and browsers that don't.
You can try following way to check Browser version.
<!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> And if you need to know only IE Browser version then you can follow below code. This code works well for version IE6 to IE11
<!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> Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.
I've written a method to detect browsers by duck-typing.
Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.
Demo: https://jsfiddle.net/6spj1059/
// Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification)); // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1 - 79 var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); // Edge (based on chromium) detection var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1); // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS; var output = 'Detecting browsers by ducktyping:<hr>'; output += 'isFirefox: ' + isFirefox + '<br>'; output += 'isChrome: ' + isChrome + '<br>'; output += 'isSafari: ' + isSafari + '<br>'; output += 'isOpera: ' + isOpera + '<br>'; output += 'isIE: ' + isIE + '<br>'; output += 'isEdge: ' + isEdge + '<br>'; output += 'isEdgeChromium: ' + isEdgeChromium + '<br>'; output += 'isBlink: ' + isBlink + '<br>'; document.body.innerHTML = output;The previous method depended on properties of the rendering engine (-moz-box-sizing and -webkit-transform) to detect the browser. These prefixes will eventually be dropped, so to make detection even more robust, I switched to browser-specific characteristics:
document.documentMode.StyleMedia constructor. Excluding Trident leaves us with Edge.InstallTrigger chrome object, containing several properties including a documented chrome.webstore object.chrome.webstore is deprecated and undefined in recent versionsSafariRemoteNotification, which was introduced after version 7.1, to cover all Safaris from 3.0 and upwards.window.opera has existed for years, but will be dropped when Opera replaces its engine with Blink + V8 (used by Chromium).chrome object is defined (but chrome.webstore isn't). Since Opera tries hard to clone Chrome, I use user agent sniffing for this purpose.!!window.opr && opr.addons can be used to detect Opera 20+ (evergreen).CSS.supports() was introduced in Blink once Google switched on Chrome 28. It's of course, the same Blink used in Opera.Updated in November 2016 to include detection of Safari browsers from 9.1.3 and upwards
Updated in August 2018 to update the latest successful tests on chrome, firefox IE and edge.
Updated in January 2019 to fix chrome detection (because of the window.chrome.webstore deprecation) and include the latest successful tests on chrome.
Updated in December 2019 to add Edge based on Chromium detection (based on the @Nimesh comment).
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
