如何让嵌入式 iframe 自适应内容高度并实现父容器滚动

通过 javascript 动态读取 iframe 内容的实际高度并设置其样式，可使 iframe 高度精准匹配内部文档，从而避免多余空白或内部滚动，确保父容器统一控制滚动行为。

在 Web 开发中，使用

以下为完整、健壮的实现方案（推荐替代已废弃的 标签）：

.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；
• ✅ 推荐用
• ✅ 使用 scrollHeight 而非 offsetHeight，前者包含溢出内容高度，更准确；
• ✅ 添加 display: block 消除 iframe 默认行内元素带来的底部空白；
• ✅ 对于含动态渲染（如 Vue/React/MathJax）的子页面，应在子页中通过 window.parent.postMessage() 通知父页重新调用 adjustIframeHeight。

该方案实现了真正的“内容驱动高度”，父容器 .content-wrapper 始终掌控滚动体验，用户无需在 iframe 内部二次滚动，大幅提升交互一致性与可用性。