通过 javascript 动态读取 iframe 内容的实际高度并设置其样式，可使 iframe 高度精准匹配内部文档，从而避免多余空白或内部滚动，确保父容器统一控制滚动行为。
在 Web 开发中，使用 <iframe> 嵌入外部 HTML 文件时，常面临高度适配难题：若固定 height，则不同内容长度会导致大量留白或溢出；若设为 height: auto 或 100%，又因 iframe 的渲染机制限制而无法生效。根本原因在于 iframe 初始高度与内部文档高度解耦，且跨域限制会阻碍 DOM 访问——但同源前提下，我们可通过 contentWindow.document.body.scrollHeight 精确获取内容真实高度。
以下为完整、健壮的实现方案（推荐替代已废弃的 <embed> 标签）：
<body onload="mathSubject()">
<div class="nav"></div>
<div class="content-wrapper">
<iframe id="embedded-content" src="content.html" frameborder="0"></iframe>
</div>
</body>.content-wrapper {
width: 80vw;
margin: 0 auto;
overflow-y: auto; /* 父容器启用滚动 */
border: 1px solid #eee;
}
#embedded-content {
width: 100%;
border: none;
display: block; /* 防止底部默认间距 */
}// 确保 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('embedded-content');
// 处理 iframe 加载完成事件（含重试逻辑，应对动态内容延迟渲染）
const adjustIframeHeight = () => {
try {
// 同源检查：避免跨域报错
if (iframe.contentWindow && iframe.contentWindow.document) {
const doc = iframe.contentWindow.document;
const height = Math.max(
doc.body.scrollHeight,
doc.body.offsetHeight,
doc.documentElement.clientHeight,
doc.documentElement.scrollHeight
);
iframe.style.height = height + 'px';
}
} catch (e) {
console.warn('无法读取 iframe 内容高度（可能跨域）:', e);
// 跨域场景可降级为固定最小高度 + 父容器滚动
iframe.style.height = '600px';
}
};
// 首次加载后调整
iframe.addEventListener('load', adjustIframeHeight);
// 可选：监听 iframe 内部内容变化（如动态加载、MathJax 渲染后）
// 若内容含异步资源，建议在子页面中触发自定义事件通知父页重新计算
});⚠️ 关键注意事项：
- ✅ 必须保证 src 页面与主页面同源（协议、域名、端口一致），否则浏览器安全策略将阻止访问 contentWindow.document；
- ✅ 推荐用 <iframe> 替代 <embed>，因其对 DOM 操作支持更完善、兼容性更好；
- ✅ 使用 scrollHeight 而非 offsetHeight，前者包含溢出内容高度，更准确；
- ✅ 添加 display: block 消除 iframe 默认行内元素带来的底部空白；
- ✅ 对于含动态渲染（如 Vue/React/MathJax）的子页面，应在子页中通过 window.parent.postMessage() 通知父页重新调用 adjustIframeHeight。
该方案实现了真正的“内容驱动高度”，父容器 .content-wrapper 始终掌控滚动体验，用户无需在 iframe 内部二次滚动，大幅提升交互一致性与可用性。
