index.html里的iframe高度怎么自适应？-html教程-PHP中文网

iframe高度需js动态设置：同域用onload读contentdocument.scrollheight，跨域用postmessage通信；内容动态变化时需mutationobserver或resizeobserver监听更新。

index.html里的iframe高度怎么自适应？

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。此时子页面要主动上报高度：

子页面（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

父页面监听示例：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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 });
};