通过 javascript 动态读取 iframe 内容的实际高度并设置其样式，可使 iframe 高度随内容自适应，避免内部滚动、保留外部容器滚动体验。
在 Web 开发中，使用 <iframe> 嵌入外部 HTML 页面时，常希望其高度能自动匹配内容实际高度，从而让父容器（如 .content-wrapper）统一控制滚动行为——即用户只滚动外层 div，而非 iframe 内部出现多余滚动条。但直接设置 height: 100% 或 auto 通常无效，因为 iframe 的初始渲染高度与文档流脱节，且跨域限制会阻止对 contentDocument 的访问。
✅ 正确解法是：在 iframe 加载完成（onload）后，通过 contentWindow.document.body.scrollHeight 获取其内容真实高度，并动态设置 iframe 元素的 style.height。
以下是完整、健壮的实现示例：
<div class="content-wrapper">
<iframe id="embedded-content" src="content.html" frameborder="0"></iframe>
</div>
<style>
.content-wrapper {
width: 80vw;
margin: 0 auto;
overflow-y: auto; /* 确保父容器可滚动 */
border: 1px solid #eee;
}
#embedded-content {
width: 100%;
border: none;
display: block; /* 防止底部默认间隙 */
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('embedded-content');
const adjustIframeHeight = () => {
try {
// 注意：仅同源 iframe 可访问 contentDocument
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (!doc) return;
const height = doc.body?.scrollHeight || doc.documentElement?.scrollHeight || 0;
iframe.style.height = Math.max(height, 300) + 'px'; // 最小高度防空白
} catch (e) {
console.warn('无法获取 iframe 内容高度（可能跨域）:', e.message);
// 跨域 fallback：可预设高度或使用 postMessage 协作
}
};
// 首次加载后调整
iframe.addEventListener('load', adjustIframeHeight);
// 可选：监听内容变化（如动态渲染后）
// 若内容含 JS 渲染（如 MathJax、Vue），建议由子页面主动 postMessage 通知高度更新
});
</script>⚠️ 关键注意事项：
- 同源限制：该方法仅适用于与主站同源（协议、域名、端口均相同）的 iframe；跨域 iframe 无法直接读取 contentDocument，需改用 postMessage 通信方案。
- 渲染时机：确保 scrollHeight 在 DOM 完全渲染后读取，因此必须在 load 事件中执行；若子页面有异步渲染（如图表、LaTeX 渲染），应在子页完成后再主动发送高度消息。
- 最小高度保护：添加 Math.max(height, 300) 避免内容极短时 iframe 塌陷。
- 替代方案提醒：若无法控制被嵌入页面（如第三方内容），推荐改用 iframe 的 seamless 属性（已废弃）或服务端代理+内联渲染，或采用现代方案如 Web Components + Shadow DOM 封装。
此方法简洁可靠，已在主流浏览器中长期验证，是实现「iframe 自适应高度 + 外部滚动」的标准实践。
