Open In App

How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

The browser on which the current page is opening can be checked using JavaScript.

The userAgent property of the navigator object is used to return the user-agent header string sent by the browser. This user-agent string contains information about the browser by including certain keywords that may be tested for their presence.

The presence of a specific user-string can be detected using the indexOf() method. The indexOf() method is used to return the first occurrence of the specified string value in a string. If the value does not come up in the string, “-1” is returned.

The user-agent string of the browser is accessed using the navigator.userAgent property and then stored in a variable. The presence of the strings of a browser in this user-agent string is detected one by one.

  • Detecting the Chrome browser: The user-agent of the Chrome browser is “Chrome”. This value is passed to indexOf() method to detect this value in the user-agent string.

    As the indexOf() method would return a value that is greater than “-1” to denote a successful search, the “greater-than” operator is used to return a boolean value on whether the search was successful or not. This is done for all the following tests.




    // Detect Chrome
    let chromeAgent = userAgentString.indexOf("Chrome") > -1;

    
    

  • Detecting the Internet Explorer browser: The user-agent of the Internet Explorer browser is “MSIE” or “rv:”. Both these values are passed to the indexOf() method to detect this value in the user-agent string and the result of both them are used with the OR operator.




    // Detect Internet Explorer
    let IExplorerAgent = userAgentString.indexOf("MSIE") > -1 || 
                         userAgentString.indexOf("rv:") > -1;

    
    

  • Detecting the Firefox browser: The user-agent of the Firefox browser is “Firefox”. This value is passed to indexOf() method to detect this value in the user-agent string.




    // Detect Firefox
    let firefoxAgent = userAgentString.indexOf("Firefox") > -1;

    
    

  • Detecting the Safari browser: The user-agent of the Safari browser is “Safari”. This value is passed to indexOf() method to detect this value in the user-agent string.

    One additional check is required in the case of the Safari browser as the user-agent of the Chrome browser also includes the Safari browser’s user-agent. If both the user-agents of Chrome and Safari are in the user-agent, it means that the browser is Chrome, and hence the Safari browser value is discarded.




    // Detect Safari
    let safariAgent = userAgentString.indexOf("Safari") > -1;
      
    // Discard Safari since it also matches Chrome
    if ((chromeAgent) && (safariAgent)) safariAgent = false;

    
    

  • Detecting the Opera browser: The user-agent of the Opera browser is “OP”. This value is passed to indexOf() method to detect this value in the user-agent string.

    One additional check is also required in the case of this browser as the user-agent of the Opera browser also includes the Chrome browser’s user-agent. If both the user-agents of Chrome and Opera are in the user-agent, it means that the browser is Opera, and hence the Chrome browser value is discarded.




    // Detect Opera
    let operaAgent = userAgentString.indexOf("OP") > -1;
      
    // Discard Chrome since it also matches Opera        
    if ((chromeAgent) && (operaAgent)) chromeAgent = false;

    
    

Example:




<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to detect Safari, Chrome, IE, Firefox
        and Opera browser using JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>
        How to detect Safari, Chrome, IE, Firefox
        and Opera browser using JavaScript?
    </b>
      
    <p>
        Click on the button to detect
        the current browser
    </p>
      
    <p>
        Is Safari? 
        <span class="output-safari"></span>
    </p>
      
    <p>
        Is Chrome? 
        <span class="output-chrome"></span>
    </p>
      
    <p>
        Is Internet Explorer? 
        <span class="output-ie"></span>
    </p>
      
    <p>
        Is Firefox? 
        <span class="output-firefox"></span>
    </p>
      
    <p>
        Is Opera browser? 
        <span class="output-opera"></span>
    </p>
      
    <button onclick="checkBrowser()">
        Detect browser
    </button>
      
    <script>
        function checkBrowser() {
          
            // Get the user-agent string
            let userAgentString = 
                navigator.userAgent;
          
            // Detect Chrome
            let chromeAgent = 
                userAgentString.indexOf("Chrome") > -1;
          
            // Detect Internet Explorer
            let IExplorerAgent = 
                userAgentString.indexOf("MSIE") > -1 || 
                userAgentString.indexOf("rv:") > -1;
          
            // Detect Firefox
            let firefoxAgent = 
                userAgentString.indexOf("Firefox") > -1;
          
            // Detect Safari
            let safariAgent = 
                userAgentString.indexOf("Safari") > -1;
                  
            // Discard Safari since it also matches Chrome
            if ((chromeAgent) && (safariAgent)) 
                safariAgent = false;
          
            // Detect Opera
            let operaAgent = 
                userAgentString.indexOf("OP") > -1;
                  
            // Discard Chrome since it also matches Opera     
            if ((chromeAgent) && (operaAgent)) 
                chromeAgent = false;
          
            document.querySelector(".output-safari").textContent
                        = safariAgent;
            document.querySelector(".output-chrome").textContent
                        = chromeAgent;
            document.querySelector(".output-ie").textContent
                        = IExplorerAgent;
            document.querySelector(".output-opera").textContent
                        = operaAgent;
            document.querySelector(".output-firefox").textContent
                        = firefoxAgent;
        }
    </script>
</body>
  
</html>


Output:

  • Output on the Chrome browser:
    chrome-output
  • Output on the Firefox browser:
    firefox-output
  • Output on the Opera browser:
    opera-output


Last Updated : 29 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads