父页面需在iframe的load事件后延迟读取真实高度，同域可直接访问dom并监听resize，跨域必须由子页通过postmessage通知；还需处理overflow、box-sizing及body默认margin等问题。
iframe 内容高度变化时，父页面怎么拿到真实高度
直接读 iframe.contentDocument.body.scrollHeight 大概率不准——内容还没加载完、跨域、CSS 重排未触发都可能导致取值偏小。必须等 iframe 的 load 事件触发后，再延迟一小会儿（比如 setTimeout 0 帧）再读，或者监听 resize（需子页配合）。跨域时这条路完全走不通，只能靠子页主动发消息。
同域 iframe 自适应高度的最小可行代码
核心是监听子页 load + resize，再用 postMessage 或直接 DOM 访问更新高度。同域下推荐直接访问：
<iframe id="myIframe" src="page.html"></iframe>
<script>
const iframe = document.getElementById('myIframe');
const updateHeight = () => {
const doc = iframe.contentDocument || iframe.contentWindow.document;
const height = Math.max(
doc.body.scrollHeight,
doc.body.offsetHeight,
doc.documentElement.clientHeight,
doc.documentElement.scrollHeight,
doc.documentElement.offsetHeight
);
iframe.style.height = height + 'px';
};
iframe.addEventListener('load', updateHeight);
// 子页里需触发：window.parent.postMessage('resize', '*')
window.addEventListener('message', (e) => {
if (e.data === 'resize') updateHeight();
});
</script>
跨域 iframe 高度同步必须子页配合
父页无法读取跨域 iframe 的 DOM，唯一可靠方式是子页在自身内容变化后主动通知父页。子页需加这段逻辑：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听自身
DOMContentLoaded、load、resize（如含动态渲染） - 每次变化后调用
window.parent.postMessage({ type: 'height', value: document.body.scrollHeight }, '*') - 父页用
window.addEventListener('message', ...)接收并校验来源（建议用具体 origin 替代*）
不校验 origin 容易被恶意页面伪造消息，导致高度被设为极大值撑爆布局。
滚动条消失但内容被截断？检查 overflow 和 box-sizing
即使高度设对了，仍可能显示不全。常见原因：
-
iframe父容器有overflow: hidden，把多出部分裁掉了 - 子页根元素用了
box-sizing: border-box但父页没预留边框/内边距空间 - 子页
body有默认 margin（Chrome/Firefox 默认 8px），要重置：body { margin: 0; } - 子页用了 CSS 容器查询或
vh单位，高度随视口变，但父页只在 load 时设了一次
自适应不是设一次就完事，尤其是单页应用嵌套场景，子页路由切换、组件懒加载都会让高度突变——必须持续监听，不能只靠初始 load。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
