How to detect the version of a browser ? - GeeksforGeeks

18 Nov, 2020
This article includes basic theory and technique of browser detection in JavaScript-enabled web browsers.
Description: Even though most of the scripts works on JavaScript-enabled web browser, there are certain things that is not going to work on some browsers i.e. they are browser dependent and in some cases old web browser doesn’t support some script.In some cases, it becomes very important to know the client’s web browser for delivering some content or information appropriately. Basically, it allows you to know the client web browser version and name and here we need to write different functions for different browsers for the purpose of detection.
Browser Detection: Mainly there are two objects that are used for browser detection which is as follows:
navigator.appName
navigator.appVersion
The purpose of the first object is to determine the web browser whereas the purpose of the second one is to determine the version of the web browser.
For Example, if the browser is Mozilla Firefox, navigator.appName returns the string “Mozilla Firefox”. If it is Internet Explorer, navigator.appName returns the string “Microsoft Internet Explorer”. Using both objects, we can create an alert box to display what web browser the client is using and this navigator object contain all the information about web browser version, name, and more. 
Example:
Javascript
<!DOCTYPE html><html>  <head>    <script Language="JavaScript">        var objappVersion = navigator.appVersion;        var browserAgent = navigator.userAgent;        var browserName = navigator.appName;        var browserVersion = '' + parseFloat(navigator.appVersion);        var browserMajorVersion = parseInt(navigator.appVersion, 10);        var Offset, OffsetVersion, ix;          // For Chrome         if ((OffsetVersion = browserAgent.indexOf("Chrome")) != -1) {            browserName = "Chrome";            browserVersion = browserAgent.substring(OffsetVersion + 7);        }          // For Microsoft internet explorer         else if ((OffsetVersion = browserAgent.indexOf("MSIE")) != -1) {            browserName = "Microsoft Internet Explorer";            browserVersion = browserAgent.substring(OffsetVersion + 5);        }          // For Firefox        else if ((OffsetVersion = browserAgent.indexOf("Firefox")) != -1) {            browserName = "Firefox";        }          // For Safari        else if ((OffsetVersion = browserAgent.indexOf("Safari")) != -1) {            browserName = "Safari";            browserVersion = browserAgent.substring(OffsetVersion + 7);            if ((OffsetVersion = browserAgent.indexOf("Version")) != -1)                browserVersion = browserAgent.substring(OffsetVersion + 8);        }          // For other browser "name/version" is at the end of userAgent         else if ((Offset = browserAgent.lastIndexOf(' ') + 1) <            (OffsetVersion = browserAgent.lastIndexOf('/'))) {            browserName = browserAgent.substring(Offset, OffsetVersion);            browserVersion = browserAgent.substring(OffsetVersion + 1);            if (browserName.toLowerCase() == browserName.toUpperCase()) {                browserName = navigator.appName;            }        }          // Trimming the fullVersion string at         // semicolon/space if present         if ((ix = browserVersion.indexOf(";")) != -1)            browserVersion = browserVersion.substring(0, ix);        if ((ix = browserVersion.indexOf(" ")) != -1)            browserVersion = browserVersion.substring(0, ix);            browserMajorVersion = parseInt('' + browserVersion, 10);        if (isNaN(browserMajorVersion)) {            browserVersion = '' + parseFloat(navigator.appVersion);            browserMajorVersion = parseInt(navigator.appVersion, 10);        }        document.write(''            + 'Name of Browser = ' + browserName + '<br>'            + 'Full version = ' + browserVersion + '<br>'            + 'Major version = ' + browserMajorVersion + '<br>'            + 'navigator.appName = ' + navigator.appName + '<br>'            + 'navigator.userAgent = ' + navigator.userAgent + '<br>'        );    </script></head>  </html>
Output:
Below Output represents the output of browser detection for “Chrome”Name of Browser = ChromeFull version = 86.0.4240.183Major version = 86navigator.appName = Netscapenavigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36
Name of Browser = ChromeFull version = 86.0.4240.183Major version = 86navigator.appName = Netscapenavigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36
Below Output represents the output of browser detection for “Mozilla Firefox”Name of Browser = FirefoxFull version = 5Major version = 5navigator.appName = Netscapenavigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0)Gecko/20100101 Firefox/80.0
Name of Browser = FirefoxFull version = 5Major version = 5navigator.appName = Netscapenavigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0)Gecko/20100101 Firefox/80.0
Conclusion: This article starts with the theory of browser detection and later on it explains the browser detection scheme and script for detection. It is very beneficial in the current environment because all browsers support this application. So detect/find the browser and then write the corresponding code.
HTML-Misc
JavaScript-Misc
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?