想让 iframe 像普通区块一样，根据内容自动调整高度？很遗憾，浏览器没提供这个“自动档”功能。这并非 bug，而是 iframe 作为独立文档容器的设计使然。要实现视觉上的无缝嵌入，手动同步高度是唯一途径，并且需要根据不同的场景选择不同的技术方案。
同域下直接读取 contentDocument 高度
当 iframe 加载的页面与父页面同源（协议、域名、端口完全一致）时，事情就简单多了。你可以直接访问 iframe 内部的 DOM 来获取其真实高度。
- 核心方法是使用
iframe.contentWindow.document.body.scrollHeight。不过，更稳妥的做法是取document.documentElement.scrollHeight，它能更好地兼容一些边缘的布局情况。 - 这里有个关键点：必须等待子页面完全加载完毕后再读取高度，否则大概率会拿到 0。因此，务必监听
iframe.onload事件，而不是父页面的DOMContentLoaded。 - 在代码实现时，还需要注意浏览器的差异。一个健壮的写法通常会包含 try/catch 块。
跨域通信必须用 postMessage，且 origin 必须校验
一旦 iframe 加载的是第三方或不同子域的页面，浏览器出于安全考虑，会严格禁止父页面直接访问其内部 DOM。这时，postMessage 就成了官方的、也是唯一的通信桥梁。
这个方案需要父子页面相互配合：
- 子页面负责“上报”：在自身内容加载或变化后，计算出当前高度，并通过
window.parent.postMessage将高度数据发送给父页面。 - 父页面负责“接收并调整”：监听
message事件，在收到子页面发来的消息后，更新 iframe 的高度。
这里有一个至关重要的安全原则：父页面在接收消息时，必须严格校验 event.origin。只处理来自可信域的消息，防止恶意网站伪造消息操控你的页面布局。
// 子页面发送高度
window.addEventListener('load', () => {
const height = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
);
window.parent.postMessage({ type: 'iframeResize', height }, 'https://your-parent-domain.com');
});
// 父页面监听并调整
window.addEventListener('message', event => {
if (event.origin !== 'https://your-iframe-domain.com') return;
if (event.data.type !== 'iframeResize') return;
const iframe = document.getElementById('myFrame');
if (iframe) iframe.style.height = event.data.height + 'px';
});
动态内容变化时，MutationObserver 比轮询更可靠
前面基于 onload 的方案，只解决了初始高度的问题。如果 iframe 内部的内容是动态变化的，比如通过 AJAX 加载数据、切换分页或渲染图表，高度就需要持续同步。
传统的思路是使用 setInterval 进行轮询，每隔几百毫秒检查一次。这种方法虽然简单，但效率低下，且可能无法及时捕捉到快速的变化。
更优雅的方案是在子页面内部使用 MutationObserver API。它可以监听 DOM 树的变化，一旦检测到内容增减或样式变动，就自动触发高度上报，精准又高效。
// 在子页面中观察DOM变化并上报
const observer = new MutationObserver(() => {
const h = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
window.parent.postMessage({ type: 'iframeResize', height: h }, 'https://your-parent-domain.com');
});
observer.observe(document.body, { childList: true, subtree: true });
需要注意的是，MutationObserver 不支持 IE11 以下的浏览器。如果需要兼容老版本 IE，可以考虑降级使用 resize 事件配合防抖函数，但精度会打些折扣。
设置高度前必须先清空旧值，否则高度“只增不减”
这是实践中一个非常隐蔽的坑。如果你直接给 iframe 的 style.height 属性赋值，当子页面内容高度减小时，iframe 很可能不会跟着收索。因为浏览器可能会将你设置的值解释为一个“最小高度”。
解决办法其实很简单：在设置新高度之前，先清空旧的高度约束。
- 可以将
iframe.style.height设置为'auto'。 - 或者直接移除
height属性：iframe.removeAttribute('height')。
在进行这个操作时，稍微注意一下执行时机。有时在 onload 事件中立即读取高度并设置，可能因为样式未完全应用而计算不准。用一个 setTimeout(..., 0) 将赋值操作推迟到下一个任务队列，通常能解决这个问题。
iframe.onload = () => {
iframe.style.height = 'auto'; // 关键一步：先清空旧高度
setTimeout(() => {
const h = iframe.contentWindow.document.documentElement.scrollHeight;
iframe.style.height = h + 'px';
}, 0);
};
如果采用的是跨域的 postMessage 方案，父页面在接收到新高度并更新 iframe 前，同样需要执行这个“先清空，再设置”的步骤。
说到底，iframe 高度自适应的难点，不在于写出某一段代码，而在于准确判断应用场景：是否跨域？内容是否动态？是否需要兼容老浏览器？这些条件相互组合，决定了最终的技术选型。没有一招通吃的万能药，理清约束，对症下药，才是解决问题的正确姿势。
