This article includes the basic theory and technique of browser detection in JavaScript-enabled web browsers.
Description: Even though most of the scripts work 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 are as follows:
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 Edge, navigator.appName returns the string “Microsoft Edge”. Using both objects, we can create an alert box to display what web browser the client is using and this navigator object contains all the information about the web browser version, name, and more.
Example: This example shows the use of the above-explained approach.
Javascript
<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> |
Output:
The below Output represents the output of browser detection for “Chrome”
Name of Browser = Chrome
Full version = 86.0.4240.183
Major version = 86
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/86.0.4240.183
Safari/537.36
The below Output represents the output of browser detection for “Mozilla Firefox”
Name of Browser = Firefox
Full version = 5
Major version = 5
navigator.appName = Netscape
navigator.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.
