js 怎么监听浏览器窗口大小变化-js教程-PHP中文网

js 怎么监听浏览器窗口大小变化

月夜之吻

发布： 2025-08-17 16:08:01

原创

832人浏览过

监听javascript中浏览器窗口大小变化主要通过window.addeventlistener('resize', callback)实现，需绑定resize事件到window对象并执行回调函数；为兼容不同浏览器，获取窗口宽高可使用window.innerwidth、document.documentelement.clientwidth或document.body.clientwidth；为优化频繁触发导致的性能问题，可采用防抖或节流技术，1. 防抖通过设定延迟（如250毫秒），仅在最后一次触发后执行一次，适用于调整结束后执行的场景；2. 节流通过设定时间间隔（如250毫秒），在持续触发期间定期执行一次，适用于需要过程中定期响应的场景；在react中，应使用useeffect在组件挂载时添加监听，在卸载时移除以避免内存泄漏，并结合usestate更新状态；此外，还可使用matchmedia监听特定媒体查询变化，如根据(max-width: 768px)切换逻辑，该方法避免频繁触发，适合响应式设计，且需注意老版本浏览器兼容性。

js 怎么监听浏览器窗口大小变化

监听 JavaScript 中的浏览器窗口大小变化，主要通过

window.addEventListener('resize', callback)

登录后复制

实现。核心就是绑定

resize

登录后复制

事件到

window

登录后复制

对象，然后执行你的回调函数。

解决方案

window.addEventListener('resize', function() {
  // 获取窗口新的宽度和高度
  let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  // 在这里执行你的逻辑，例如更新布局、重新计算元素位置等
  console.log('窗口大小改变了！宽度：' + width + '，高度：' + height);
});

登录后复制

window.innerWidth

登录后复制

、

document.documentElement.clientWidth

登录后复制

和

document.body.clientWidth

登录后复制

这三种方式获取窗口宽度，是为了兼容不同的浏览器。

如何优化 resize 事件的性能？

频繁调整窗口大小会触发大量的

resize

登录后复制

事件，如果每次都执行复杂的计算或 DOM 操作，可能会导致性能问题。可以采用“防抖 (debounce)”或“节流 (throttle)”技术来优化。

防抖 (Debounce): 只在最后一次触发后等待一段时间再执行。

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const optimizedResize = debounce(function() {
  console.log('防抖后的 resize 事件');
  // 执行你的逻辑
}, 250); // 250 毫秒的延迟

window.addEventListener('resize', optimizedResize);

登录后复制

节流 (Throttle): 在一段时间内只执行一次。

帮小忙

腾讯QQ浏览器在线工具箱平台

查看详情

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

const optimizedResize = throttle(function() {
  console.log('节流后的 resize 事件');
  // 执行你的逻辑
}, 250); // 250 毫秒的间隔

window.addEventListener('resize', optimizedResize);

登录后复制

选择防抖还是节流取决于你的具体需求。如果只需要在调整结束后执行一次，防抖更合适。如果需要在调整过程中定期执行，节流更合适。

如何在 React 组件中使用 resize 事件监听？

在 React 组件中，通常在

componentDidMount

登录后复制

钩子中添加事件监听，并在

componentWillUnmount

登录后复制

钩子中移除事件监听，防止内存泄漏。

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空依赖数组，确保 effect 只在组件挂载和卸载时执行

  return (
    <div>
      当前窗口宽度：{windowWidth}
    </div>
  );
}

export default MyComponent;

登录后复制

这里使用了

useState

登录后复制

hook 来存储窗口宽度，并在

handleResize

登录后复制

函数中更新它。

useEffect

登录后复制

hook 用于添加和移除事件监听。空依赖数组

[]

登录后复制

确保 effect 只在组件挂载和卸载时执行，避免不必要的更新。

除了 window.resize 事件，还有其他方法监听窗口大小变化吗？

虽然

window.resize

登录后复制

是最常用的方法，但还有一些其他的选择，例如使用

matchMedia

登录后复制

来监听特定的媒体查询变化。

const mediaQuery = window.matchMedia('(max-width: 768px)');

function handleMediaChange(event) {
  if (event.matches) {
    console.log('屏幕小于 768px');
  } else {
    console.log('屏幕大于 768px');
  }
}

mediaQuery.addListener(handleMediaChange);

// 初始化时执行一次
handleMediaChange(mediaQuery);

登录后复制

这种方法适用于根据不同的屏幕尺寸应用不同的样式或逻辑。