HTML5怎样用ResizeObserver监听尺寸得数据_HTML5尺寸监听取法【甄选】

ResizeObserver构造函数必须传入回调函数，否则报TypeError；监听目标须为已挂载dom元素；contentRect仅含content box尺寸；需手动调用unobserve或disconnect清理，避免内存泄漏。

ResizeObserver 构造函数必须传回调函数

不传 callback 会直接报错：TypeError: Failed to construct 'ResizeObserver': 1 argument required, but only 0 present。它不像 IntersectionObserver 那样支持无参构造后手动绑定。

正确写法是立即传入一个函数，该函数接收两个参数：entries（ResizeObserverEntry 数组）和可选的 observer 实例本身：

const ro = new ResizeObserver((entries) => {   for (const entry of entries) {     console.log('宽：', entry.contentRect.width);     console.log('高：', entry.contentRect.height);   } });

监听目标必须是已挂载的 DOM 元素

ResizeObserver 不会自动等待元素出现，如果传入 NULL、undefined 或尚未插入文档的节点（比如刚 document.createElement('div') 但没 appendChild），会静默失败——既不报错，也不触发回调。

• 确保调用 ro.observe(target) 前，target 已存在于 document 中
• 动态创建的元素建议在 append 后立刻 observe，不要依赖后续事件“再观察”
• 若目标由框架（如 react/vue）控制，需在 useEffect / mounted 钩子中执行 observe

contentRect 是只读对象，且不含滚动或边框尺寸

entry.contentRect 返回的是一个只读的 DOMRectReadOnly 对象，包含 width、height、top、left 等字段，但它反映的是 content box 尺寸（即 box-sizing: content-box 下的宽高），不包括 padding、border、margin，也不受 transform 影响。

立即学习“前端免费学习笔记（深入）”；

常见误区：

• 误以为 contentRect.width 等于 element.offsetWidth —— 实际上后者含 border 和 padding
• 想监听滚动导致的可视区域变化？ResizeObserver 不管这个，得用 scroll 事件或 IntersectionObserver
• 需要包含 padding 的尺寸？可手动计算：entry.contentRect.width + parseFloat(getComputedStyle(target).paddingLeft) + parseFloat(getComputedStyle(target).paddingRight)

停止监听要用 unobserve，不用时记得 disconnect

每个 ResizeObserver 实例会持续持有对观察目标的弱引用，不显式清理可能引发内存泄漏，尤其在单页应用频繁切换组件时。

• 移除某个目标：ro.unobserve(target)
• 清空全部目标：ro.disconnect() —— 这不会销毁实例，之后还能重新 observe
• 组件卸载/元素销毁前务必调用 disconnect，否则回调仍可能执行（此时 target 可能已为 null 或被移除）

容易被忽略的一点：disconnect 后不能再调用 observe，除非新建实例。别指望它像事件监听器那样“重连”。