使用 JavaScript/jQuery 的跨浏览器窗口大小调整事件

resize() 方法是 jQuery 中的一个内置方法，当浏览器窗口改变其大小时会使用它。 resize() 方法会触发 resize 事件或附加一个函数以在发生 resize 事件时运行。 jQuery 有一个用于调整窗口大小事件的内置方法。

句法：

$(selector).resize(function)

此语法用于跨浏览器调整大小事件。

示例 1：此示例使用 resize() 方法来计算浏览器窗口大小调整的次数。

  

    
  
    
        var x = 1;
        $(document).ready(function() {
            $(window).resize(function() {
                $("span").text(x += 1);
            });
        });
    

  

  
    Window resized 0 times.
    Try resizing your browser window.
  

  

输出：

• 在调整浏览器窗口大小之前：
  
• 调整浏览器窗口大小后：
  

您可以使用 addEventListener() 方法注册一个事件处理程序来监听浏览器窗口调整大小事件，例如 window.addEventListener('resize', ...)。

句法：

object.addEventListner("resize", myscript);

示例 2：此示例显示调整大小窗口的大小。

  

    
    JavaScript Window Resize Event

  

    
  
    
      
        // Defining event listener function
        function displayWindowSize() {
              
            // Get width and height of the window
            // excluding scrollbars
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
  
            // Display result inside a div element
            document.getElementById("result").innerHTML
                  = "Width: " + w + ", " + "Height: " + h;
        }
  
        // Attaching the event listener function
        // to window's resize event
        window.addEventListener("resize", displayWindowSize);
  
        // Calling the function for the first time
        displayWindowSize();
    
      
    
        Note: Please resize the browser
        window to see how it works.
    

  

输出：

• 在调整浏览器窗口大小之前：
  
• 调整浏览器窗口大小后：