如何在 JavaScript 中捕获浏览器窗口大小调整事件
答案:使用addEventListener()方法
您可以简单地使用 addEventListener() 方法注册一个事件处理程序来监听浏览器窗口 resize 事件，例如 window.addEventListener('resize', ...)。
以下示例将在调整大小时显示浏览器窗口的当前宽度和高度。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript 窗口调整事件</title>
</head>
<body>
<div id="result"></div>
<script>
/* 定义事件监听函数 */
function displayWindowSize(){
/* Get width and height of the window excluding scrollbars */
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
/* 在 div 元素内显示结果 */
document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
/* 将事件侦听器函数附加到窗口的调整大小事件 */
window.addEventListener("resize", displayWindowSize);
/* 第一次调用函数 */
displayWindowSize();
</script>
<p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>您应该避免使用像 window.onresize = function(event) { ... }; 这样的解决方案，因为它会覆盖 window.onresize 事件处理函数。 您最好使用事件侦听器为 resize 事件分配一个新的事件处理程序，如上例所示。
请查看 JavaScript 事件监听器 上的教程以了解更多信息。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
