本文详细介绍了如何使用 javascript 动态获取浏览器窗口的实时宽度和高度，并响应窗口大小变化。内容涵盖了原生 javascript 的事件监听机制，以及在 react 应用中通过自定义 hook 实现的封装方法，旨在帮助开发者构建高效、响应式的用户界面。
在现代 Web 开发中，构建响应式布局是不可或缺的一部分。虽然 CSS 媒体查询能处理大多数响应式需求，但在某些场景下，我们需要通过 JavaScript 动态获取并响应浏览器窗口的尺寸变化，例如根据窗口大小调整组件行为、执行复杂的布局计算或触发特定的动画。
实时获取浏览器窗口尺寸的核心方法
JavaScript 提供了 window.innerWidth 和 window.innerHeight 属性，用于获取浏览器视口（viewport）的当前宽度和高度（不包括浏览器工具栏和滚动条）。要实现“持续返回”尺寸，关键在于监听 window 对象的 resize 事件。
1. 使用 window.innerWidth 和 window.innerHeight
这两个属性是获取当前视口尺寸最直接的方式。
window.innerWidth: 返回浏览器窗口的内部宽度，以像素计。window.innerHeight: 返回浏览器窗口的内部高度，以像素计。
这些值会在窗口大小发生变化时实时更新。
立即学习“Java免费学习笔记（深入）”；
2. 监听 resize 事件
为了在窗口尺寸改变时执行特定操作，我们需要为 window 对象添加一个 resize 事件监听器。
/** * 处理窗口尺寸变化的函数 */function handleResize() { const newWidth = window.innerWidth; const newHeight = window.innerHeight; // 在这里执行你需要根据新尺寸进行的操作 // 例如，更新 DOM 元素的内容或调整布局 document.getElementById("app").innerHTML = ` 当前窗口宽度: ${newWidth}px, 当前窗口高度: ${newHeight}px `; console.log(`窗口尺寸更新: 宽度 ${newWidth}px, 高度 ${newHeight}px`);}// 注册 resize 事件监听器window.addEventListener("resize", handleResize);// 页面加载时立即调用一次，以获取初始尺寸handleResize();
代码解析：
handleResize() 函数: 这是一个回调函数，当 window 的 resize 事件被触发时，它将被执行。在此函数内部，我们获取当前的 window.innerWidth 和 window.innerHeight，并可以根据这些值更新 UI 或执行其他逻辑。window.addEventListener(“resize”, handleResize): 这行代码将 handleResize 函数注册为 window 对象 resize 事件的监听器。每当用户调整浏览器窗口大小时，handleResize 函数就会被调用。handleResize() (初始调用): 在页面加载完成后，我们通常需要立即调用一次 handleResize 函数，以确保在没有任何 resize 事件发生之前，页面就能正确显示或使用初始的窗口尺寸。
在 React 应用中封装窗口尺寸监听
在 React 等现代前端框架中，为了更好地管理状态和副作用，通常会将这种逻辑封装成自定义 Hook。以下是一个 useWindowSize Hook 的示例，它能在 React 组件中方便地获取和响应窗口尺寸。
import { useEffect, useState } from 'react';/** * 一个自定义 React Hook，用于实时获取和提供浏览器窗口的尺寸。 * @returns {{width: number | undefined, height: number | undefined}} 包含窗口宽度和高度的对象。 */export function useWindowSize() { // 使用 useState 存储窗口尺寸，初始值为 undefined const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined }); useEffect(() => { // 定义处理 resize 事件的回调函数 function handleResize() { // 更新状态 setWindowSize({ width: window.innerWidth, height: window.innerHeight }); } // 注册 resize 事件监听器 window.addEventListener('resize', handleResize); // 组件挂载时立即调用一次，获取初始尺寸 handleResize(); // 返回一个清理函数，在组件卸载时移除事件监听器 return () => window.removeEventListener('resize', handleResize); }, []); // 空依赖数组表示此 effect 只在组件挂载和卸载时运行一次 return windowSize;}
useWindowSize Hook 的使用示例：
import React from 'react';import { useWindowSize } from './useWindowSize'; // 假设 useWindowSize 在同一文件或路径下function MyResponsiveComponent() { const { width, height } = useWindowSize(); if (width === undefined || height === undefined) { return 正在获取窗口尺寸...; } return ( );}export default MyResponsiveComponent;
代码解析：
useState: 用于在组件中存储和更新 windowSize 状态。初始值设为 undefined，表示尺寸尚未获取。useEffect: 用于处理副作用，即事件监听器的注册和清理。handleResize: 与原生 JS 示例中的函数类似，它获取当前窗口尺寸并更新 windowSize 状态。window.addEventListener(‘resize’, handleResize): 注册事件监听器。handleResize(): 在 useEffect 首次执行时调用一次，确保组件挂载时即有正确的尺寸。return () => window.removeEventListener(‘resize’, handleResize): 这是 useEffect 的清理机制。当组件卸载时，此函数会被调用，从而移除事件监听器，防止内存泄漏。[] (空依赖数组): 确保 useEffect 中的副作用函数只在组件挂载时执行一次，并在组件卸载时清理一次。
最佳实践与注意事项
在实际应用中，处理 resize 事件时需要考虑一些性能和用户体验方面的最佳实践。
1. 性能优化：防抖 (Debouncing) 与节流 (Throttling)
resize 事件在用户拖动窗口时会频繁触发，这可能导致 handleResize 函数被反复调用，如果函数内部执行了复杂的 DOM 操作或计算，可能会引起性能问题。
防抖 (Debouncing): 在事件停止触发后的一段时间内才执行回调函数。例如，用户拖动窗口时，每次 resize 事件都会重置一个计时器，只有当停止拖动（即在指定时间内没有新的 resize 事件触发）后，回调函数才会被执行。这适用于只需要在尺寸最终确定时执行一次操作的场景。节流 (Throttling): 在一段时间内只执行一次回调函数。例如，每 200 毫秒最多执行一次 handleResize。这适用于需要持续响应但又不想过于频繁的场景。
可以使用 Lodash 等库提供的 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(); // 首次调用仍然需要
2. 初始尺寸获取的重要性
无论是原生 JavaScript 还是 React Hook，都应该在组件加载或脚本执行时立即调用一次处理函数，以确保在任何 resize 事件发生之前，应用程序就已经获取并使用了正确的窗口尺寸。
3. 事件监听器的清理
在原生 JavaScript 中，如果页面跳转或元素被移除，需要手动调用 window.removeEventListener()。在 React useEffect 中，通过返回一个清理函数，可以确保在组件卸载时自动移除监听器，避免内存泄漏。
4. 与 CSS Media Queries 的结合
对于大多数基于断点的响应式布局调整，CSS Media Queries 仍然是首选方案，因为它更具声明性且性能更优。JavaScript 应该用于处理那些 CSS 无法直接实现或需要动态计算的响应式行为。
总结
通过 window.innerWidth、window.innerHeight 和 window.addEventListener(‘resize’, …)，我们可以有效地在 JavaScript 中获取并响应浏览器窗口的尺寸变化。在原生 JS 环境中，需要手动管理事件监听器的注册和清理；而在 React 等框架中，通过自定义 Hook 可以更优雅地封装这一逻辑，实现状态管理和生命周期控制。同时，为了优化性能和用户体验，合理运用防抖和节流技术是至关重要的。
以上就是JavaScript 实时监测与获取浏览器窗口尺寸教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588450.html
微信扫一扫 
支付宝扫一扫 
