Skip to content
Related Articles

Related Articles

Improve Article
How to detect the version of a browser ?
  • Last Updated : 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 = 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

  • 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :