如何让 iframe 自动适配其内部内容高度？-html教程

通过跨域安全通信机制 `postmessage`，父页面可接收子页面发送的内容尺寸信息，并动态调整 iframe 的宽高，从而避免滚动条、实现无缝嵌入。

在 Web 开发中，iframe 常用于嵌入第三方内容或隔离页面模块。但默认情况下，iframe 的尺寸由父页面静态设定，无法自动响应其内部文档高度变化——尤其当内容动态加载（如搜索结果列表）时，固定高度易导致空白或滚动条，影响用户体验。

要实现 iframe 自适应内容高度（同时兼顾安全性与跨域兼容性），核心方案是：父子页面通过 window.postMessage 安全通信。子页面（iframe 内容页）主动测量自身文档实际宽高，并向父页面发送消息；父页面验证来源后，动态更新 iframe 元素的 width 和 height 属性。

✅ 实现步骤概览

1. 子页面（myframe.html）：监听 load 和 resize 事件，调用 sendSize() 获取 document.documentElement.scrollHeight/Width，并通过 postMessage 发送给父窗口；
2. 父页面（parent.html）：注册 message 事件监听器，严格校验 event.origin（防止恶意站点伪造）、event.data.type 及数据结构，再安全地更新 iframe 元素属性。

? 示例代码（精简可靠版）

父页面 parent.html

<!DOCTYPE html>
<html>
<head>
  <title>Parent Page</title>
  <style>
    iframe { border: 1px solid #ccc; width: 100%; }
  </style>
</head>
<body>
  <h2>主页面内容</h2>
  <iframe name="myframe" src="myframe.html" scrolling="no"></iframe>

  <script>
    window.addEventListener('message', (event) => {
      // ? 严格校验来源（替换为你的 iframe 实际域名）
      if (event.origin !== 'http://localhost:8080') return;
      if (typeof event.data !== 'object' || event.data.type !== 'resize') return;

      const iframe = document.querySelector('iframe[name="myframe"]');
      if (!iframe) return;

      // ✅ 使用 setAttribute 确保 DOM 属性同步（避免 style.height 覆盖）
      iframe.setAttribute('width', `${event.data.width}px`);
      iframe.setAttribute('height', `${event.data.height}px`);
    });
  </script>
</body>
</html>

子页面 myframe.html