iframe高度需JS动态设置：同域用onload读contentDocument.scrollHeight，跨域用postMessage通信；内容动态变化时需MutationObserver或ResizeObserver监听更新。
iframe 高度不能靠 CSS 自动撑开，必须用 JS 主动读取内容高度并设置 —— 同域可直接访问 contentDocument，跨域必须用 postMessage。
同域 iframe：用 onload + contentDocument.body.scrollHeight
父页面（index.html）中 iframe 和目标页面在同一个域名下时，最简方案是监听 load 事件后读取子页面 body 高度：
-
scrollHeight比offsetHeight更可靠，它包含溢出内容（如未显示的滚动区域） - 优先读
documentElement.scrollHeight， fallback 到body.scrollHeight，因为某些文档模式下body可能不准确 - 必须等子页面 DOM 加载完成再读，
onload是安全时机，但注意：如果子页有动态渲染（如 React/Vue），需额外加延时或监听 DOM 变化
示例代码：
<iframe id="myFrame" src="page.html"></iframe>
<script>
const iframe = document.getElementById('myFrame');
iframe.onload = function() {
const doc = iframe.contentDocument || iframe.contentWindow.document;
const height = Math.max(
doc.documentElement.scrollHeight,
doc.body.scrollHeight
);
iframe.style.height = height + 'px';
};
</script>
跨域 iframe：必须用 postMessage 双向通信
只要协议、域名、端口任意一项不同，浏览器就禁止父页面直接访问 contentDocument。此时子页面要主动上报高度：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 子页面（
page.html）里发消息：window.parent.postMessage({ type: 'iframeHeight', height: document.body.scrollHeight }, '*') - 父页面监听
message事件，校验event.source === iframe.contentWindow防止被其他 iframe 干扰 - 生产环境务必把
'*'替换为具体源，比如'https://example.com'，否则存在 XSS 风险 - 子页面需在
DOMContentLoaded或window.onload后发送，否则scrollHeight可能为 0
父页面监听示例：
window.addEventListener('message', function(event) {
if (event.source !== iframe.contentWindow) return;
if (event.data.type !== 'iframeHeight') return;
iframe.style.height = event.data.height + 'px';
});
内容会动态变化？得监听 DOM 更新，不能只靠 onload
子页面加载完只是起点。如果内容后续由 JS 插入（如分页、搜索、折叠展开），高度会变，但 onload 不会再触发：
- 同域可用
MutationObserver监听body的子节点和属性变化，实时更新高度 - 跨域只能靠子页面自己检测变化后重发
postMessage，比如用ResizeObserver观察document.body尺寸，或用MutationObserver+ 节流防抖 - 别用
setInterval轮询检查高度 —— 性能差、易漏、难收敛，且移动端可能被节流
同域监听示例（简化版）：
iframe.onload = function() {
const observer = new MutationObserver(() => {
const doc = iframe.contentDocument;
const h = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
iframe.style.height = h + 'px';
});
observer.observe(iframe.contentDocument.body, { childList: true, subtree: true });
};
为什么设了 height="100%" 还没用？
因为 height: 100% 是相对其**包含块**计算的，而 iframe 默认的包含块是「行内格式化上下文」，高度为 0。常见误区：
- 父容器没设明确高度（如
height: 100vh或固定像素），100%就无效 -
width: 100%通常能生效，是因为父容器默认有宽度；高度则不然 -
min-height可以配合 JS 使用，作为兜底值，避免 iframe 初始高度为 0 导致布局塌陷
真正起效的组合是：width: 100% + height: auto（初始值）+ JS 动态设 style.height。
