本文详细介绍了如何使用 JavaScript 实时获取浏览器窗口的宽度和高度，并持续监听其变化，以实现动态响应式布局。内容涵盖了原生 JavaScript 的事件监听机制和 React 自定义 Hook 的实现方式，并提供了性能优化和最佳实践建议，帮助开发者构建更具适应性的网页应用。
在现代网页开发中，实现响应式设计是至关重要的。除了 CSS 媒体查询，有时我们还需要通过 JavaScript 动态地获取并响应浏览器窗口尺寸的变化，以便调整复杂的布局、组件行为或执行特定的逻辑。本文将深入探讨如何使用 JavaScript 持续获取窗口的宽度和高度。
1. 原生 JavaScript 实现
最直接且兼容性最好的方法是利用 window.innerWidth 和 window.innerHeight 属性，并结合 resize 事件监听器。
核心概念
- window.innerWidth: 返回浏览器视口（viewport）的宽度，包括垂直滚动条（如果存在）。
- window.innerHeight: 返回浏览器视口的高度，包括水平滚动条（如果存在）。
- window.addEventListener('resize', handler): 当浏览器窗口大小发生变化时，会触发 resize 事件，我们可以通过此方法注册一个回调函数来处理这些变化。
示例代码
以下是一个使用原生 JavaScript 持续监听并显示窗口尺寸的示例：
立即学习“Java免费学习笔记（深入）”；
/**
* 处理窗口尺寸变化的函数
*/
function handleResize() {
const newWidth = window.innerWidth;
const newHeight = window.innerHeight;
// 假设页面中有一个id为"app"的元素用于显示尺寸
const appElement = document.getElementById("app");
if (appElement) {
appElement.innerHTML = `当前窗口宽度: ${newWidth}px, 高度: ${newHeight}px`;
// 在这里可以执行其他基于新尺寸的逻辑，例如调整布局或重新计算元素位置
} else {
console.log(`当前窗口尺寸: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
}
}
// 1. 页面加载时立即获取一次初始尺寸
handleResize();
// 2. 注册resize事件监听器，以便在窗口大小变化时持续更新
window.addEventListener("resize", handleResize);
// 注意事项：
// 在某些单页应用（SPA）中，如果不再需要监听，
// 应该在组件卸载或页面离开时移除事件监听器，防止内存泄漏。
// window.removeEventListener("resize", handleResize);注意事项
- 初始尺寸获取: 在页面加载后，resize 事件并不会立即触发。因此，务必在注册监听器后手动调用一次 handleResize() 函数，以获取并显示初始的窗口尺寸。
- 事件移除: 为了避免潜在的内存泄漏，尤其是在单页应用（SPA）中，当不再需要监听窗口尺寸变化时（例如，组件卸载或用户导航到其他页面），应该使用 window.removeEventListener('resize', handleResize) 移除事件监听器。
2. React Hook 实现（适用于 React 应用）
在 React 应用中，为了更好地管理状态和副作用，通常会封装一个自定义 Hook 来实现窗口尺寸的持续获取。
核心概念
- useState: 用于在函数组件中声明状态变量，这里用于存储窗口的宽度和高度。
- useEffect: 用于处理副作用，例如添加和移除事件监听器。它的清理函数（return 的函数）会在组件卸载时执行，自动移除事件监听器。
示例代码
import { useEffect, useState } from 'react';
/**
* 自定义 Hook，用于获取并持续更新窗口尺寸
* @returns {object} 包含 width 和 height 属性的对象
*/
export function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined
});
useEffect(() => {
/**
* 处理窗口尺寸变化的内部函数
*/
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
}
// 1. 注册resize事件监听器
window.addEventListener('resize', handleResize);
// 2. 组件挂载时立即调用一次，获取初始尺寸
handleResize();
// 3. 返回一个清理函数，在组件卸载时移除事件监听器
return () => window.removeEventListener('resize', handleResize);
}, []); // 空数组作为依赖项，确保只在组件挂载和卸载时执行一次
return windowSize;
}如何使用
在你的 React 组件中，可以像使用其他 Hook 一样调用 useWindowSize：
import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设useWindowSize在同一个文件或路径下
function MyResponsiveComponent() {
const { width, height } = useWindowSize();
return (
<div>
<h1>我的响应式组件</h1>
<p>当前窗口宽度: {width || '未知'}px</p>
<p>当前窗口高度: {height || '未知'}px</p>
{/* 根据width和height值渲染不同的内容或样式 */}
{width && width < 768 ? (
<p>这是一个移动设备布局</p>
) : (
<p>这是一个桌面设备布局</p>
)}
</div>
);
}
export default MyResponsiveComponent;3. 性能优化：防抖（Debounce）与节流（Throttle）
resize 事件在用户拖动窗口时会频繁触发，如果事件处理函数中包含复杂的计算或 DOM 操作，可能会导致性能问题。为了优化性能，我们可以使用防抖（Debounce）或节流（Throttle）技术。
- 防抖 (Debounce): 在事件触发后，等待一个指定的时间间隔，如果在这段时间内事件再次触发，则重新计时。只有当事件停止触发一段时间后，处理函数才会被执行一次。适用于需要等待用户操作完全停止后再执行的场景。
- 节流 (Throttle): 在指定的时间间隔内，无论事件触发多少次，处理函数最多只执行一次。适用于需要持续响应但不需要过于频繁响应的场景。
示例：使用防抖优化
function debounce(func, delay) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), delay);
};
}
const debouncedHandleResize = debounce(handleResize, 200); // 设置200毫秒的防抖延迟
// 注册防抖后的事件监听器
window.addEventListener("resize", debouncedHandleResize);
// 别忘了初始调用
handleResize(); // 初始调用不需要防抖在 React Hook 中也可以类似地应用防抖或节流，通常会将 debounce 或 throttle 函数封装在 useEffect 内部，或者作为独立的工具函数引入。
4. 其他相关尺寸属性
除了 window.innerWidth 和 window.innerHeight，还有一些其他与尺寸相关的属性，了解它们可以帮助你更精确地控制布局：
- document.documentElement.clientWidth / clientHeight: 返回文档根元素（<html>）的视口宽度和高度，不包括滚动条。在某些情况下，这可能比 window.innerWidth/innerHeight 更符合你的需求。
- screen.width / screen.height: 返回用户设备屏幕的宽度和高度，与浏览器窗口大小无关。这通常用于了解用户设备的物理屏幕尺寸。
- element.offsetWidth / offsetHeight: 返回特定 DOM 元素的布局宽度和高度，包括内边距、边框和滚动条。
总结
无论是原生 JavaScript 还是 React 等前端框架，持续获取浏览器窗口尺寸的核心机制都是利用 window.addEventListener('resize', handler)。通过结合 window.innerWidth/innerHeight 和适当的性能优化（如防抖或节流），开发者可以构建出高度响应式且性能优异的网页应用。理解并熟练运用这些技术，是实现动态和自适应用户体验的关键。
