动态监听DOM元素高度变化

大家好，我是前端架构师 ，关注微信公众号【程序员大卫】，免费领取精品前端资料。

背景

在前端开发中，监听DOM元素的高度变化有时候是一个常见需求，尤其是在做响应式设计或需要根据内容变化调整布局时。常见的解决方案有两种，一种是使用现代浏览器支持的 ResizeObserver，另一种是通过兼容性更强的 iframe 技术来实现，适用于老款手机和IE浏览器。

1. ResizeObserver

ResizeObserver 是现代浏览器提供的一种监听元素尺寸变化的 API。它可以监听任意元素的大小变化，并在变化时触发回调函数，适合处理 DOM 元素高度变化的情况。

示例代码：

javascript 复制代码

// 选择你想要监听的 DOM 元素
const targetElement = document.querySelector('.target');

// 创建 ResizeObserver 实例，并传入回调函数
const resizeObserver = new ResizeObserver(entries => {
    // entries 是一个包含被监听元素的数组
    entries.forEach(entry => {
        // 获取目标元素的当前高度
        const height = entry.contentRect.height;
        console.log('元素的当前高度:', height);
    });
});

// 开始监听目标元素的尺寸变化
resizeObserver.observe(targetElement);

使用说明：

ResizeObserver 会监听目标元素的大小变化，并返回一个 entries 数组，其中每一项代表一个被观察的元素。
entry.contentRect 是一个包含元素尺寸信息的矩形对象，height 属性即为元素的高度。
这个方法对于现代浏览器（Chrome、Firefox、Safari 等）都有效，支持程度较高。

2. Iframe

对于一些老款浏览器（如 IE 浏览器）或者需要兼容更多设备的情况，我们可以采用 iframe 技术来实现动态监听容器的高度变化。通过嵌入一个隐藏的 iframe 元素，可以监听 iframe 元素的 resize 事件来间接判断容器的高度。

示例代码（纯 HTML 实现）：

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态监听DOM元素高度变化 - iframe 示例</title>
    <style>
        .container {
            width: 100%;
            height: 200px; /* 初始高度 */
            position: relative;
            border: 1px solid #ccc;
        }
        .resize-iframe {
            width: 100%;
            height: 100%;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <iframe class="resize-iframe" src="about:blank"></iframe>
    </div>

    <script>
        const container = document.querySelector('.container');
        const iframe = document.querySelector('.resize-iframe');

        // 监听 iframe 的 resize 事件
        iframe.contentWindow.addEventListener('resize', function () {
            // 获取容器的当前高度
            console.log('容器的当前高度:', container.offsetHeight);
        });

        // 为了演示，在容器的高度变化时触发 resize 事件
        setInterval(() => {
            container.style.height = Math.random() * 500 + 'px';  // 随机调整容器高度
        }, 2000);  // 每2秒调整一次高度
    </script>
</body>
</html>

使用说明：

这个方法通过将一个隐藏的 iframe 嵌套到目标容器内，利用 iframe 的 resize 事件来检测容器的高度变化。
由于 iframe 的 resize 事件会在容器的尺寸发生变化时触发，因此我们可以在事件回调中获取容器的最新高度。
此方法的兼容性更广，可以支持老旧浏览器，如 IE 浏览器。

动态监听DOM元素高度变化

背景

1. ResizeObserver

示例代码：

使用说明：

2. Iframe

示例代码（纯 HTML 实现）：

使用说明：

总结