iframe高度自适应无通用写法，须分同源与跨域处理：同源用onload+scrollHeight加setTimeout延时读取；跨域必须postMessage并校验origin，子页用ResizeObserver或MutationObserver监听动态变化，父页需防抖、清样式、设容器高度。
iframe 高度自适应没有“通用写法”——同源和跨域必须分开处理，否则必报 SecurityError 或白屏。直接写 height="100%" 或 CSS height: 100% 无效，因为 iframe 父容器默认无高度，百分比失去参照。
同源 iframe：onload + scrollHeight 是最简可靠方案
前提是 src 和当前页协议、域名、端口完全一致（如都是 https://example.com/page.html）。这时可直接读子页 DOM。
-
scrollHeight比offsetHeight更准，它包含溢出内容，适合长页面 - 必须在
load事件后读取，否则doc.body可能为空，返回 0 - 优先用
Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight)，兼容不同 DTD 声明 - 加兜底：比如
Math.max(height, 300)，防空内容导致 iframe 塌陷 - 子页
<body>最好重置：body { margin: 0; padding: 0; }，否则默认边距会多算高度 - onload 里直接读
scrollHeight常不准——CSS 渲染、字体加载、图片解码未完成；建议加setTimeout(() => { /* 读高度 */ }, 0)推到下一轮事件循环
示例：
<iframe id="myIframe" src="same-origin-page.html"></iframe>
<script>
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
try {
const doc = iframe.contentDocument || iframe.contentWindow.document;
setTimeout(() => {
const height = Math.max(
doc.documentElement.scrollHeight,
doc.body.scrollHeight
);
iframe.style.height = Math.max(height, 300) + 'px';
}, 0);
} catch (e) {
console.warn('高度获取失败:', e.message);
}
};
</script>跨域 iframe：必须用 postMessage，且 origin 必须校验
只要 src 域名、协议或端口不同（如主站 https://a.com，iframe 是 https://b.com/report.html），直接访问 contentDocument 就会触发 Blocked a frame from accessing a cross-origin frame 错误。
立即学习“前端免费学习笔记（深入）”；
- 子页必须在内容稳定后发送消息，不能只靠
window.onload——Vue/React 渲染、图表加载、懒加载图片都可能延迟高度变化 - 推荐监听
DOMContentLoaded+requestIdleCallback或MutationObserver后再发postMessage - 父页接收时必须校验
event.origin，不能用'*'（生产环境会埋安全漏洞） - 子页发送格式建议统一为对象：
{ type: 'iframeHeight', height: xxx }，便于未来扩展其他消息类型 - 父页收到后应做防抖，避免高频更新导致 layout thrashing
父页示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
window.addEventListener('message', (event) => {
if (event.origin !== 'https://b.com') return;
if (event.data?.type === 'iframeHeight') {
const iframe = document.getElementById('myIframe');
iframe.style.height = event.data.height + 'px';
}
});子页示例：
function sendHeight() {
const h = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
window.parent.postMessage({ type: 'iframeHeight', height: h }, 'https://a.com');
}
<p>// 多次触发防重复
let pending = false;
const scheduleSend = () => {
if (pending) return;
pending = true;
requestIdleCallback(() => {
sendHeight();
pending = false;
});
};</p><p>document.addEventListener('DOMContentLoaded', scheduleSend);
new MutationObserver(scheduleSend).observe(document.body, {
childList: true,
subtree: true,
attributes: true
});动态内容场景：MutationObserver 或 ResizeObserver 要配合使用
仅靠 onload 无法应对 iframe 内部 JS 动态增删 DOM、表格重绘、图表渲染完成等后续高度变化。
-
MutationObserver适合监听 DOM 结构变化，但不感知样式重排（如字体加载后文字回流） -
ResizeObserver能监听document.body尺寸变化，但需注意：它监听的是元素自身的尺寸，不是内容高度；必须确保 body 有明确的display: block和无overflow: hidden - 现代方案建议组合：子页用
ResizeObserver监听document.body，配合requestAnimationFrame节流后发postMessage - IE10 及以下不支持
ResizeObserver，需降级为定时轮询（setInterval）+scrollHeight对比
子页 ResizeObserver 示例（需同源或已注入通信逻辑）：
if ('ResizeObserver' in window) {
new ResizeObserver(() => {
requestAnimationFrame(() => {
const h = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
window.parent.postMessage({ type: 'iframeHeight', height: h }, 'https://a.com');
});
}).observe(document.body);
}容易被忽略的细节：父容器显式设高 + iframe 样式清理
即使高度计算正确，如果父容器没设 height: auto 或存在 overflow: hidden，iframe 仍会被裁剪；而子页若带默认 margin 或 min-height，也会让高度失真。
- 父容器必须有明确高度上下文：要么自身是
height: auto（依赖内容撑开），要么设min-height防塌陷 - iframe 自身要清除内联
height属性（用iframe.removeAttribute('height')），否则会覆盖style.height - 禁用 iframe 默认滚动条：
scrolling="no"或 CSSoverflow: hidden，但要注意这会隐藏子页原生滚动能力 - 移动端需额外处理 viewport 缩放、字体加载延迟，建议子页加
document.fonts.ready等待后再发高度
真正稳定的 iframe 自适应，从来不是“一次设置完事”，而是对加载时机、内容稳定性、跨域边界、父容器约束这四点同时做容错——少一个环节，就可能在某个用户设备上突然截断内容。
