当我们在开发前端应用程序时，需要确保我们的用户界面能够适应各种屏幕大小和分辨率。为了实现这一点，我们需要监控窗口大小的变化并相应地进行调整。
在本文中，我们将深入探讨跨浏览器窗口调整大小事件，并提供一些示例代码来帮助您更好地了解如何在您的应用程序中使用它们。
监听窗口调整大小事件
要监听窗口调整大小事件，我们可以使用 window.resize 方法。例如，在我们要监听窗口调整大小的页面中，我们可以添加以下 JavaScript 代码：
--------------------------------- ---------- - -- ------------- ---
在上面的代码中，我们使用 addEventListener 方法来向 resize 事件注册一个处理函数。每当窗口大小发生变化时，该处理函数就会被调用。
获取窗口大小
当窗口大小发生变化时，我们可能需要获取新的窗口大小并相应地更新我们的用户界面。我们可以使用 window.innerWidth 和 window.innerHeight 属性来获取当前窗口的宽度和高度，如下所示：
--------------------------------- ---------- - --- ----- - ------------------ --- ------ - ------------------- -- ------------ ---
在上面的代码中，我们通过访问 window.innerWidth 和 window.innerHeight 属性来获取当前窗口的宽度和高度。然后，我们可以将这些值用于更新我们的用户界面。
跨浏览器事件兼容性
需要注意的是，不同浏览器对 resize 事件的支持可能会有所不同。因此，在编写跨浏览器的 JavaScript 代码时，我们需要考虑到这一点。
以下是一个示例代码片段，使用了一个帮助函数来确保正确处理 resize 事件：
-------- ----------------------- --------- -
-- ------- -------- --- ----------- -
-------
-
--- --------- - ---------------- -- --
--- ---------- - ----------------- -- --
-------- -------------- -
--- ----- - ---------------- -- --
--- ------ - ----------------- -- --
-- ------ --- --------- -- ------ --- ----------- -
-----------
-
--------- - ------
---------- - -------
-
--------------------------------- --------------
-
-- ----
--- --------- - --------------------------------------
---------------------------- ---------- -
-- -----------
---在上面的代码中，我们定义了一个名为 addResizeListener 的帮助函数，该函数接受两个参数：要监听大小变化的元素和要调用的回调函数。该函数首先检查回调函数是否是一个函数，然后初始化 lastWidth 和 lastHeight 变量以与元素的当前宽度和高度匹配。
然后，我们定义了一个名为 handleResize 的处理函数，该函数检查元素的新宽度和高度是否与以前的宽度和高度不同。如果是，它调用回调函数并更新 lastWidth 和 lastHeight 变量。
最后，我们使用 addEventListener 方法在 window 对象上注册 resize 事件，并将 handleResize 函数作为处理函数传递给它。我们还提供了一个示例，演示如何使用 addResizeListener 函数来监听元素的大小变化并执行相应操作。
结论
本文深入探讨了跨浏览器窗口调整大小事件，并提供了一些示例代码来帮助您更好地了解如何在您的应用程序中
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8833