JavaScript Detect Browser – How to Detect Browser
How to detect a browser using JavaScript. Here is the quick solution, JavaScript detect browser as well as you can use jQuery to detect the browser.
Everyday we visit many websites and these websites know our basic information like IP address, Browser, Service Provider and many more using JavaScript. Since these websites use Google Analytics or any other analytics program to track the number of online visitors, how long to spend time-on-site, and many of their details.
Even more, few most ranked websites are track our all keyboard and mouse activities. They develop own tracking program with their export skills. However, today we learn how to detect the browser using JavaScript. This JavaScript detect browser script detects which browser you are currently using.
Detect Browser using JavaScript/jQuery
The following script is lightweight and straightforward, so beginner developers should be able to understand it and add it to their projects. We have created a program for detecting the top 4 popular browsers Mozilla Firefox, Google Chrome, Safari, Microsoft Edge/Internet.
We are used above 4 browsers icons. Default, all browsers icons color grayscale default. As a result, when you run the program current browser icon makes colored and starts the animation. However, the other 3 browsers color remain grayscale.
JavaScript Detect Browser
In JavaScript has a navigator object that contains data about the browser being used. There are many properties in the navigator object. However, .userAgent property has a string contains data about the browser, operating system.
Next, match() function is an inbuilt function in JavaScript. Which is to search a string for a match against a regular expression and if any match found then return match as an array. All matches are we know based on their name except one Trident.
You have to create separate files for HTML, CSS, and JavaScript.
HTML
Create an HTML file named index.html and add the below code.
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JavaScript Browser Detect</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="browser firefox"></div>
<div class="browser chrome"></div>
<div class="browser safari"></div>
<div class="browser edge"></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
Same way create a CSS file named style.css and add the following styles.
.wrapper {
position: absolute;
left: 50vw;
top: 50vh;
transform: translateX(-50%) translateY(-50%);
}
.wrapper .browser {
display: inline-block;
height: 70px;
width: 70px;
filter: grayscale(100%);
position: relative;
background-repeat: no-repeat;
background-size: 70px 70px;
}
.wrapper .firefox {
background-image: url('icon/firefox.png');
}
.wrapper .chrome {
background-image: url('icon/chrome.png');
}
.wrapper .safari {
background-image: url('icon/safari.png');
}
.wrapper .edge {
background-image: url('icon/edge.png');
}
.wrapper .browser.active {
filter: grayscale(0%);
animation-duration: 1s;
animation-name: highlight;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes highlight {
from {
top: 0;
}
to {
top: -20px;
}
}JS
Finally, create a JavaScript file named script.js and add the following javascript code.
var browser;
var agent = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)/?s*(.?d+(.d+)*)/i);
if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*11./i)) {
browser = "msie";
}
else {
browser = agent[1].toLowerCase();
}
if (document.getElementsByClassName(browser).length > 0)
document.getElementsByClassName(browser)[0].classList.add('active');What is Trident?
Trident is a userAgent. Trident is specifying the version of Internet Explorer. Since Internet Explorer 8, the Trident version starts from version 4.
IE 8 = Trident/4.0
IE 9 = Trident/5.0
IE 10 = Trident/6.0
IE 11 = Trident/7.0
Similarly, you can detect browser thru jQuery. jQuery is widely used. Thus, the following jQuery script to detect browser.
jQuery Detect Browser
Furthermore, you can detect browser using jQuery library. You have to add the following jQuery library in HTML just before the <script src="script.js"></script> line.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>JS
You have to create a JavaScript file named script.js and add the following jQuery code.
// JQuery code to detect browser
$(document).ready(function() {
var browser;
var agent = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)/?s*(.?d+(.d+)*)/i);
if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*11./i)) {
browser = "edge";
}
else {
browser = agent[1].toLowerCase();
}
$('.browser.' + browser).addClass("active");
});Final Thoughts
That all you need to know how to detect browser using JavaScript/jQuery. Furthermore, we are see how to use useragent property. Even more, we see how to use match in-built function.
We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new WordPress articles for free. Moreover, you can explore here other JavaScript related articles.
If you like our article, please consider buying a coffee for us.
Thanks for your support!
Buy me a coffee!
Join the Discussion.