Detect Browser in JavaScript

How to detect browser in JavaScript [Chrome, Firefox, Safari, Opera, Edge , MS IE]?

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

1. HTML markup to display browser name.
2. JavaScript code to detect browser using useragent.match
3. 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.

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.

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 
 
Subscribe to our newsletter
 
Get the latest and greatest from Codepedia delivered straight to your inbox.
 
Your email address will not be published. Required fields are marked *
 
Источник
 
Vanilla JavaScript Browser Detection
 
Determine which browser a website visitor is using. Detect the browser with this JavaScript code examples.
 
Now and then, you might want to show specific alerts based on the web browser a visitor uses.
 
For instance, this can be because you just made a new Chrome browser extension and want everyone on Chrome to auto-download it.
 
So let's look at this tutorial on browser detection with JavaScript.
 
Non-Preferred detection method permalink
 
The non-preferred method of detecting a browser type uses the user agent. However, many browsers and systems spoof this, so it's unreliable.
 
We won't be diving into that in this tutorial.
 
JavaScript Browser Detection permalink
 
So we'll be using feature detection, which validates browser-specific elements.
 
What feature detection looks like in code:
 
// Opera 8.0+ const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ const isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" const isSafari = /constructor/i.test(window.HTMLElement) || (function (p)  return p.toString() === '[object SafariRemoteNotification]'; >)( !window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification) ); // Internet Explorer 6-11 const isIE = /*@cc_on!@*/ false || !!document.documentMode; // Edge 20+ const isEdge = !isIE && !!window.StyleMedia; // Chrome 1 - 79 const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); // Edge (based on chromium) detection const isEdgeChromium = isChrome && navigator.userAgent.indexOf('Edg') != -1; // Blink engine detection const isBlink = (isChrome || isOpera) && !!window.CSS; let output = 'Your browser is 🎩:
'; output += 'isFirefox: ' + isFirefox + '
'; output += 'isChrome: ' + isChrome + '
'; output += 'isSafari: ' + isSafari + '
'; output += 'isOpera: ' + isOpera + '
'; output += 'isIE: ' + isIE + '
'; output += 'isEdge: ' + isEdge + '
'; output += 'isEdgeChromium: ' + isEdgeChromium + '
'; output += 'isBlink: ' + isBlink + '
'; document.body.innerHTML = output;
 
View the example Javascript code for detecting browsers on Codepen permalink
 
Thank you for reading, and let's connect! permalink
 
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
 
Источник
 
How to detect the user browser with JavaScript
 
Learn how to detect which browser the user is running (Chrome, IE, LightHouse, FireFox, Safari, etc.) using plain JavaScript.
 
You can check which browser the user is running using plain JavaScript.
 
To detect the user browser, you need to analyze the property userAgent of the object navigator .
 
If you want to do something specific, for example, provide a polifill for a regular expression when the browser is Safari, you do this:
 
if (navigator.userAgent.includes('Safari')) < // the user is running Safari // do something useful > 
 
On the other hand, if you want to do something for all browsers but Chrome , you check if the userAgent doesn’t include your search string:
 
if (!navigator.userAgent.includes('Chrome')) < // the user is NOT running Chrome > 
 
Using indexOf and toLowerCase
 
As an alternative to includes you can also use the indexOf method. If it returns -1 , this means that the search string wasn’t found.
 
if (navigator.userAgent.indexOf('Chrome')  0) < // the user is NOT running Chrome > 
 
If you’re not sure how exactly the user browser is spelled, you can try using the toLowerCase function on the navigator.userAgent .
 
if (navigator.userAgent.toLowerCase().indexOf('chrome')  0) < // the user is NOT running Chrome > 
 
Источник