如何在iframe内页面高度变化（URL不变）时动态调整其高度？

我想在Duda网站里嵌入WordPress内容页面的iframe，试了不少脚本都没用，只有某个脚本（感谢原作者）效果接近完美——它能在iframe跳转不同URL时自动调整高度，但iframe内当前页面内容高度变化（比如展开搜索菜单过滤器，URL保持不变）时，iframe高度不会跟着调整。现有父窗口和子窗口代码如下，能不能简单修复这个问题？

嵌入iframe的父窗口代码：

window.addEventListener("message", (event) => {
    if (event.data.type === "resize") {
        const iframe = document.querySelector("iframe");
        iframe.height = event.data.value + "px";
    }
}, false);

iframe内嵌内容的子窗口代码：

window.addEventListener("load", (event) => {
    const el = document.querySelector("html");

    const styles = window.getComputedStyle(el);
    const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);

    const height = Math.ceil(el.offsetHeight + margin);

    window.parent.postMessage({
        type: "resize",
        value: height
    }, "*");
});

解决方案 #

核心问题是子窗口只在页面加载完成时发送一次高度消息，没监听页面内容的动态变化。我们给子窗口加个内容变化监听，就能在页面高度改变时自动同步给父窗口。

修改后的子窗口代码

// 封装计算并发送高度的函数
function sendHeightToParent() {
    const el = document.querySelector("html");
    const styles = window.getComputedStyle(el);
    const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
    const height = Math.ceil(el.offsetHeight + margin);
    
    window.parent.postMessage({
        type: "resize",
        value: height
    }, "*");
}

// 页面加载完成时触发一次
window.addEventListener("load", sendHeightToParent);

// 监听DOM内容变化（元素增删、样式改变都会触发）
const observer = new MutationObserver(() => {
    // 加个小延迟，避免动画过程中频繁计算高度
    setTimeout(sendHeightToParent, 100);
});

// 监听整个body及其子元素的变化
observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['style', 'class']
});

// 额外监听窗口大小变化
window.addEventListener("resize", sendHeightToParent);

父窗口代码保持不变

原父窗口代码已经能正常接收消息并调整高度，不需要修改。

为什么这样改？ #

1. 把高度计算逻辑封装成函数，方便重复调用；
2. MutationObserver能精准捕捉页面内容的动态变化，比如展开过滤器菜单时的DOM或样式改变；
3. 加setTimeout是为了避开动画过程中的频繁触发，让高度计算更准确；
4. 保留窗口resize监听，覆盖窗口缩放的场景。

内容的提问来源于stack exchange，提问作者Mary-Lou