How to Detect User Browser Using JavaScript (Free Code)

This is a simple JavaScript project that will detect user browsers. Many projects require the user to know the browser's information. In that case, you can use this kind of JavaScript Browser Detect project.

When you open this project from any of your browsers, it will automatically detect your browser. Earlier I shared a project that can detect your operating system.

This Browser Detection design is made in a very simple way. Only one text is used here which will show the name of your browser.

Detect user Browser JavaScript

In this case, 'navigator.userAgent' has been used to get the information of the browser. This is a JavaScript property used for returning the user-agent header's value sent to the server by the browser.

You can watch the demo below to know how it works. Here I will get the required live preview and source code.

See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

We hope you find out how this browser system works using JavaScript Navigator. Almost all browser information is installed here. This will show you the type of browser you are using. 

Although many smaller browser names are not added here. You can easily add the names of those browsers here. I have shown below step-by-step how to do it.

How to Detect Browser in JavaScript

There are two options for creating this project. Below I have given all the codes that you can copy and add to your file. Or you can download the source code using the download button below.

At first, I added some text using a little bit of HTML. Then designed it using CSS. Then Detect User Browser is executed using JavaScript.

Basic structure of detecting user browser

Using the HTML below I created a box and used one line of text. Some parts of this test can be seen by default and the rest will be activated by JavaScript.

<div id="container">

   You are using <span id="browser-details"></span><br />

</div>

Design it with CSS

Now I have designed it with CSS. First I did some basic design on the webpage and added a background color. Then I designed the box.

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

background-color: #328cf3;

}

#container {

position: absolute;

background-color: #ffffff;

transform: translate(-50%, -50%);

top: 50%;

left: 50%;

width: 90vw;

color: #051a32;

font-weight: 600;

line-height: 1.8em;

text-align: center;

max-width: 600px;

padding: 40px 20px;

border-radius: 5px;

font-family: "Poppins", sans-serif;

font-size: 5vmin;

box-shadow: 0 20px 50px rgba(5, 26, 50, 0.18);

}

#container span {

font-weight: 700;

color: #9d1df3;

}

Activate Browser Detection with JavaScript

Now, this user browser information has been collected using JavaScript. Here I have given the explanation of each line so you will not have difficulty in understanding.

let browserDetailsRef = document.getElementById("browser-details");

 //Add another browser's name to this format

var browserList = [

{ name: "Firefox", value: "Firefox" },

{ name: "Opera", value: "OPR" },

{ name: "Edge", value: "Edg" },

{ name: "Chrome", value: "Chrome" },

{ name: "Safari", value: "Safari" },

];

let broswerChecker = () => {

//Useragent contains browser details and OS  details but we need to separate them

let userDetails = navigator.userAgent;

for (let i in browserList) {

  //check if the string contains any value from the array

  if (userDetails.includes(browserList[i].value)) {

    //extract browser name and version from the string

    browserDetailsRef.innerHTML = browserList[i].name || "Unknown Browser";

    break;

  }

}

};

//onload

window.onload = broswerChecker();

Hopefully, you have been able to create this detect user browser information project using the above codes. Very simple code has been used here to create detect browsers in javascript. If there is any problem in understanding, you can let us know by commenting.

If you have difficulty copying the above codes and adding them to your project, you can use the download button below. Please comment on how you like this project (detect browser in JavaScript).

The download will start automatically