October 6, 2021

How to Detect Browser Name in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to detect browser name in javascript. Also, the question should be why you encounter a situation where you have to identify the browser before executing a certain piece of code?

The possible reason could be code compatibility issues or intentionally executing a certain piece of code for certain devices only.

There are a lot of browsers in the market such as Firefox, Safari, Chrome, Internet Explorer, etc. This means that there is no guarantee that your code is going to work on all of these browsers without any issue.

Javascript is being upgraded day by day and these new updates surely not going to work on an older version of any browser.

Also, you may encounter a situation where you would like to run a certain piece of code only in mobile-specific browsers and another piece of code only in desktop-specific browsers. This logic essentially requires a browser, device, and OS detection.

Creating a solution for such a problem from scratch is not easy and that is why we are going to take advantage of third-party libraries such as Detect JS.

This library contains a bunch of helpful methods that will help us not only in detecting the name of the browser but also the OS and device type. To learn more about it, please do check out its github repo.

In the following example, we are going to display device type, browser and, and OS name when the browser is completely loaded. Please have a look over the code example and the steps given below.

HTML & CSS

We have multiple div elements with different ids. We will display OS, browser, and device details in them with the help of innerText property.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have downloaded Detect JS minified version and included it at the bottom of the HTML file using the script tag.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">    
    <title>Document</title>
</head>
<body>
    
    <div id="name"></div>
    <div id="device"></div>
    <div id="os"></div>

    <script src="detect.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

div {
    margin-bottom: 20px;
    border: 1px solid black;
    text-align: center;
    width: 200px;
}

Javascript

We are using the parse() method of Detect JS. It requires a user agent string as a parameter. The navigator object has userAgent property and we are passing that as a parameter to the parse() method.
The parse() method returns browser details in the form of an object and we are storing that in the ua variable.
We have selected div element with an id of name using document.querySelector() method and we are displaying browser name using ua.browser.name property.

We have selected div element with an id of the device using document.querySelector() method and we are displaying device type using ua.device.type property.
We have selected div element with an id of os using document.querySelector() method and we are displaying OS name using ua.os.name property.

let ua = detect.parse(navigator.userAgent);

document.querySelector('#name').innerText = `Browser Name: ${ua.browser.name}`;
document.querySelector('#device').innerText = `Device Type: ${ua.device.type}`;
document.querySelector('#os').innerText = `OS Name: ${ua.os.name}`;

You May Also Like: