JavaScript detect browser name: Here in this article we learn how to detect browser in javascript. I had a requirement where based on browser I have to display something different. In short, I have to detect firefox browser in javascript and display the respective message to the user. Same if the user browser is chrome, then display respective message.
Basically we write code in JavaScript to check user browser. Which help answer to our question .i.e How do I know if I am using IE or Chrome in JavaScript?
Here we are detecting 5 major browsers and that are Chrome, Firefox, Safari, Opera, MS Edge. And we are showing 2 different approach to detect browser at client-side i.e using userAgent.match and userAgent.indexOf with live demo example. Although based on different browser display different content is not good practise.
Steps to detect browser name in JavaScript
- HTML markup to display browser name.
- JavaScript code to detect browser using useragent.match
- JavaScript code to detect browser using useragent.indexOf
HTML markup to display browser name
First, we create a new index.html page and add the below markup. Here we add an h1 tag, which will display the browser name on page-load.
<html>
<head>
<title>Detect Browser in JavaScript</title>
</head>
<body>
<h1></h1>
</body>
</html>Approach 1: JavaScript code to detect browser name using userAgent.match
To detect user browser information we use the navigator.userAgent property. And then we match with the browser name to identify the user browser.
JS code to identify browser is as written below:
function fnBrowserDetect(){
let userAgent = navigator.userAgent;
let browserName;
if(userAgent.match(/chrome|chromium|crios/i)){
browserName = "chrome";
}else if(userAgent.match(/firefox|fxios/i)){
browserName = "firefox";
} else if(userAgent.match(/safari/i)){
browserName = "safari";
}else if(userAgent.match(/opr//i)){
browserName = "opera";
} else if(userAgent.match(/edg/i)){
browserName = "edge";
}else{
browserName="No browser detection";
}
document.querySelector("h1").innerText="You are using "+ browserName +" browser";
}Now call this JS function on page load, and this will display the user browser name on page load.
Approach 2: JavaScript code to detect browser using userAgent.IndexOf
Here in the 2nd approach we again using navigator.userAgent with indexof to figure out the browser name.
JS code as written below:
var browserName = (function (agent) {
switch (true) {
case agent.indexOf("edge") > -1: return "MS Edge";
case agent.indexOf("edg/") > -1: return "Edge ( chromium based)";
case agent.indexOf("opr") > -1 && !!window.opr: return "Opera";
case agent.indexOf("chrome") > -1 && !!window.chrome: return "Chrome";
case agent.indexOf("trident") > -1: return "MS IE";
case agent.indexOf("firefox") > -1: return "Mozilla Firefox";
case agent.indexOf("safari") > -1: return "Safari";
default: return "other";
}
})(window.navigator.userAgent.toLowerCase());
document.querySelector("h1").innerText="You are using "+ browserName +" browser";
With the above code will be able to detect chrome browser, also with approach 2, we are able to detect MS Edge browser chromium based. By checking trident we were able to detect MS Internet Explorer browser IE in javascript.
Conclusion: Hereby using the navigator.userAgent we were successfully able to detect Chrome, Firefox, Edge, Safari, and Opera browser in Javascript. Add display the browser name on page load. It's in pure javascript, as we didn't use any external JS library for the browser detection.
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee
Post Comment
Your email address will not be published. Required fields are marked *