jQuery如何监听浏览器窗口最小化事件？-编程学习网

这篇文章将为大家详细讲解有关jQuery如何监听浏览器窗口最小化事件？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery监听浏览器窗口最小化事件

jQuery是JavaScript的一个库，用于简化与HTML DOM(文档对象模型)的交互。它提供了一个方便的方法来监听浏览器窗口最小化事件。

以下是使用jQuery监听窗口最小化事件的步骤：

加载jQuery库： 在HTML文件的<head>部分中，插入<script>标签引用jQuery库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

定义事件处理程序： 使用$(window).resize()方法定义一个事件处理程序，该事件处理程序将在窗口大小发生变化后触发。

$(window).resize(function() {
  // 当窗口大小发生变化时执行此代码
});

检查窗口最小化状态： 在事件处理程序中，使用window.innerWidth或window.innerHeight属性检查窗口的宽度或高度是否小于某个阈值。例如：

if (window.innerWidth < 400 || window.innerHeight < 300) {
  // 窗口已最小化
}

实例：

下面是一个完整的jQuery代码示例，演示了如何监听窗口最小化事件：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(window).resize(function() {
      if (window.innerWidth < 400 || window.innerHeight < 300) {
        alert("窗口已最小化！");
      }
    });
  </script>
</head>
<body>
  <p>窗口大小: </p>
  <p id="width">宽度: </p>
  <p id="height">高度: </p>
</body>
</html>

当窗口最小化时，该代码将显示一个警报并更新页面上的宽度和高度值。

附加说明：