How to write a browser-specific code using jQuery ?

Last Updated : 23 Mar, 2022

In this article, we will see how to write browser-specific code using jQuery. To write the browser-specific code, we will use the Navigator userAgent property and jQuery indexof() method. The Navigator userAgent property is used to get the user-agent header’s value sent to the server by the browser. It returns a string that represents values such as name, version, and platform of the browser.

The index() method is used to return the index of the specified elements with respect to the selector.

Syntax:

navigator.userAgent.indexOf(element)

Approach: First we will use navigator.userAgent.indexOf() method to get the index of browser. If the returned index does not -1 then print the browser name, otherwise test for the next browsers.

Example 1: In this example, we will use navigator.userAgent.indexOf() method to print the browser name on the screen.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to write a browser-specific code using jQuery? 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
    </script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to write a browser-specific 
        code using jQuery? 
    </h3> 
  
    <div class="GFG"></div> 
  
    <script> 
        $(document).ready(function () { 
            if (navigator.userAgent.indexOf("Chrome") != -1) { 
                $(".GFG").text('Chrome Browser'); 
            } 
            else if (navigator.userAgent.indexOf("Firefox") != -1) { 
                $(".GFG").text("Firefox Browser"); 
            } 
            else if ((navigator.userAgent.indexOf("MSIE") != -1)  
                || (!!document.documentMode == true)) { 
                alert('Internet Explorer'); 
            } 
            else { 
                alert('Unknown Browser'); 
            } 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use navigator.userAgent.indexOf() method and a button, when the button is clicked, the function is called and print the browser name on the screen.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to write a browser-specific code using jQuery? 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
    </script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to write a browser-specific 
        code using jQuery? 
    </h3> 
  
    <input type="button" id="btn" value="Click Here!"> 
    <br><br> 
  
    <span class="GFG"></span> 
  
    <script> 
        $(document).ready(function () { 
            $("#btn").click(function () { 
                if (navigator.userAgent.indexOf("Chrome") != -1) { 
                    $(".GFG").text('Chrome Browser').css({ 
                        "background-color": "green", 
                        "color": "white", 
                        "font-size": "26px", 
                        "font-weight": "bold" 
                    }); 
                } 
                else if (navigator.userAgent.indexOf("Firefox") != -1) { 
                    $(".GFG").text("Firefox Browser").css({ 
                        "background-color": "red", 
                        "color": "white", 
                        "font-size": "26px", 
                        "font-weight": "bold" 
                    }); 
                } 
                else if ((navigator.userAgent.indexOf("MSIE") != -1) 
                    || (!!document.documentMode == true)) { 
                    $(".GFG").text('Internet Explorer').css({ 
                        "background-color": "blue", 
                        "color": "white", 
                        "font-size": "26px", 
                        "font-weight": "bold" 
                    }); 
                } 
                else { 
                    $(".GFG").text('Unknown Browser').css({ 
                        "background-color": "yellow", 
                        "color": "white", 
                        "font-size": "26px", 
                        "font-weight": "bold" 
                    }); 
                } 
            }); 
        }); 
    </script> 
</body> 
  
</html>