通过跨域安全通信机制 `postmessage`，父页面可接收子页面发送的内容尺寸信息，并动态调整 iframe 的宽高，从而避免滚动条、实现无缝嵌入。
在 Web 开发中，iframe 常用于嵌入第三方内容或隔离页面模块。但默认情况下，iframe 的尺寸由父页面静态设定，无法自动响应其内部文档高度变化——尤其当内容动态加载（如搜索结果列表）时，固定高度易导致空白或滚动条，影响用户体验。
要实现 iframe 自适应内容高度（同时兼顾安全性与跨域兼容性），核心方案是：父子页面通过 window.postMessage 安全通信。子页面（iframe 内容页）主动测量自身文档实际宽高，并向父页面发送消息；父页面验证来源后，动态更新 iframe 元素的 width 和 height 属性。
✅ 实现步骤概览
- 子页面（myframe.html）：监听 load 和 resize 事件，调用 sendSize() 获取 document.documentElement.scrollHeight/Width，并通过 postMessage 发送给父窗口；
- 父页面（parent.html）：注册 message 事件监听器，严格校验 event.origin（防止恶意站点伪造）、event.data.type 及数据结构，再安全地更新 iframe 元素属性。
? 示例代码（精简可靠版）
父页面 parent.html
Parent Page 主页面内容
子页面 myframe.html
Iframe Content 这是嵌入的内容
内容高度会随文本增减而变化…
⚠️ 关键注意事项
- 跨域限制不可绕过：若 iframe 源与父页同源，可直接操作 iframe.contentDocument，但跨域场景下 postMessage 是唯一标准且安全的方案；
- origin 校验必须严格：生产环境务必使用精确的协议+域名（如 'https://example.com'），禁用通配符 '*'；
- scrollHeight 可能不准确？ 确保子页面 和 无意外 margin/padding 干扰；建议重置 CSS：html, body { margin: 0; padding: 0; }；
- 性能优化：对频繁 resize 场景，可添加防抖（debounce）逻辑，避免高频重绘；
- 移动端适配：部分 iOS Safari 对 scrollHeight 计算有延迟，可补充 setTimeout(sendSize, 100) 或监听 DOMContentLoaded。
✅ 总结
iframe 自适应高度不是“设置一个 CSS 属性”就能解决的问题，而是涉及浏览器安全模型与跨上下文通信的系统性实践。采用 postMessage 方案，既满足了功能需求，又坚守了同源策略底线。只要父子页面协同约定好消息格式与校验规则，即可稳定、安全、高效地实现内容驱动的 iframe 尺寸自适应。
