How Can You Tell Which Browser You Are Using?
JavaScript Discover Browser – How to Detect Browser
How to detect a browser using JavaScript. Here is the quick solution, JavaScript find browser too equally you lot tin 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 fourth dimension-on-site, and many of their details.
Fifty-fifty more, few most ranked websites are rail our all keyboard and mouse activities. They develop own tracking program with their consign skills. However, today we learn how to discover the browser using JavaScript. This JavaScript observe browser script detects which browser you are currently using.
Notice Browser using JavaScript/jQuery
The following script is lightweight and straightforward, so beginner developers should be able to empathise it and add it to their projects. We have created a program for detecting the top four popular browsers Mozilla Firefox, Google Chrome, Safari, Microsoft Edge/Internet.
Nosotros are used above 4 browsers icons. Default, all browsers icons color grayscale default. Every bit a result, when you run the program current browser icon makes colored and starts the animation. However, the other iii browsers colour remain grayscale.
JavaScript Notice Browser
In JavaScript has a navigator object that contains data about the browser existence used. At that place are many backdrop in the navigator object. However, .userAgent property has a cord contains data about the browser, operating system.
Adjacent, match() function is an inbuilt part in JavaScript. Which is to search a string for a match confronting a regular expression and if any match found then render friction match every bit an array. All matches are nosotros know based on their proper name except 1 Trident.
You have to create separate files for HTML, CSS, and JavaScript.
HTML
Create an HTML file named index.html and add the beneath lawmaking.
<html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript Browser Detect</title> <meta name="viewport" content="width=device-width, initial-calibration=1"> <link rel="stylesheet" href="style.css"> </caput> <body> <div class="wrapper"> <div class="browser firefox"></div> <div class="browser chrome"></div> <div grade="browser safari"></div> <div class="browser edge"></div> </div> <script src="script.js"></script> </torso> </html> CSS
Same way create a CSS file named manner.css and add together the post-obit styles.
.wrapper { position: absolute; left: 50vw; superlative: 50vh; transform: translateX(-50%) translateY(-50%); } .wrapper .browser { brandish: inline-block; height: 70px; width: 70px; filter: grayscale(100%); position: relative; background-echo: no-repeat; background-size: 70px 70px; } .wrapper .firefox { background-image: url('icon/firefox.png'); } .wrapper .chrome { background-epitome: url('icon/chrome.png'); } .wrapper .safari { background-image: url('icon/safari.png'); } .wrapper .edge { groundwork-image: url('icon/edge.png'); } .wrapper .browser.active { filter: grayscale(0%); animation-duration: 1s; animation-proper name: highlight; blitheness-timing-function: ease-out; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes highlight { from { top: 0; } to { meridian: -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)/?southward*(.?d+(.d+)*)/i); if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*xi./i)) { browser = "msie"; } else { browser = agent[one].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/seven.0
Similarly, yous can detect browser thru jQuery. jQuery is widely used. Thus, the post-obit jQuery script to notice browser.
jQuery Observe Browser
Furthermore, you lot can detect browser using jQuery library. Yous have to add the following jQuery library in HTML simply before the <script src="script.js"></script> line.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.four.1/jquery.min.js"></script> JS
You have to create a JavaScript file named script.js and add the post-obit jQuery code.
// JQuery lawmaking to discover browser $(document).ready(part() { var browser; var amanuensis = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)/?due south*(.?d+(.d+)*)/i); if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*11./i)) { browser = "border"; } else { browser = amanuensis[1].toLowerCase(); } $('.browser.' + browser).addClass("active"); }); Concluding 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 run into how to employ match in-built function.
Nosotros promise you have found this article helpful. Let united states know your questions or feedback if any through the annotate section in below. You tin can subscribe our newsletter and become notified when we publish new WordPress articles for complimentary. Moreover, you can explore here other JavaScript related articles.
If you lot like our commodity, please consider buying a java for united states.
Thanks for your support!
Purchase me a java!
Source: https://speedysense.com/javascript-detect-browser/
إرسال تعليق for "How Can You Tell Which Browser You Are Using?"