如何使用 jQuery 编写特定于浏览器的代码？

在本文中，我们将了解如何使用 jQuery 编写特定于浏览器的代码。要编写特定于浏览器的代码，我们将使用 Navigator 的 userAgent 属性和 jQuery indexof() 方法。 Navigator userAgent 属性用于获取浏览器发送到服务器的用户代理标头的值。它返回一个字符串，表示浏览器的名称、版本和平台等值。

index() 方法用于返回指定元素相对于选择器的索引。

句法：

navigator.userAgent.indexOf(element)

方法：首先我们将使用 navigator.userAgent.indexOf() 方法来获取浏览器的索引。如果返回的索引不是 -1，则打印浏览器名称，否则测试下一个浏览器。

示例 1：在此示例中，我们将使用 navigator.userAgent.indexOf() 方法在屏幕上打印浏览器名称。

HTML

  

    
        How to write a browser-specific code using jQuery?
    
  
    
    

  

    
        GeeksforGeeks
    
  
    
        How to write a browser-specific
        code using jQuery?
    
  
    
  
    
        $(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');
            }
        });
    

  

输出：

示例 2：在本示例中，我们将使用 navigator.userAgent.indexOf() 方法和一个按钮，当单击该按钮时，调用该函数并在屏幕上打印浏览器名称。

HTML

  

    
        How to write a browser-specific code using jQuery?
    
  
    
    

  

    
        GeeksforGeeks
    
  
    
        How to write a browser-specific
        code using jQuery?
    
  
    
    
  
    
  
    
        $(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"
                    });
                }
            });
        });
    

  

输出：