通过跨域安全通信机制 `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
<!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
<!DOCTYPE html>
<html>
<head>
<title>Iframe Content</title>
<style>body { margin: 0; padding: 16px; font-family: sans-serif;}</style>
</head>
<body>
<h3>这是嵌入的内容</h3>
<p>内容高度会随文本增减而变化…</p>
<div id="dynamic-content"></div>
<script>
function sendSize() {
const doc = document.documentElement;
window.parent.postMessage({
type: 'resize',
width: doc.scrollWidth,
height: doc.scrollHeight
}, 'http://localhost:8080'); // ⚠️ 必须与父页 origin 一致
}
// 初始加载 + 窗口大小变化 + 内容异步更新后均可触发
window.addEventListener('load', sendSize);
window.addEventListener('resize', sendSize);
// ✨ 若内容由 JS 动态插入（如 AJAX 加载结果），请手动调用：
// setTimeout(() => {
// document.getElementById('dynamic-content').innerHTML = '<p>新内容...</p>';
// sendSize(); // 重新通知父页
// }, 500);
</script>
</body>
</html>⚠️ 关键注意事项
- 跨域限制不可绕过：若 iframe 源与父页同源，可直接操作 iframe.contentDocument，但跨域场景下 postMessage 是唯一标准且安全的方案；
- origin 校验必须严格：生产环境务必使用精确的协议+域名（如 'https://example.com'），禁用通配符 '*'；
- scrollHeight 可能不准确？ 确保子页面 <body> 和 <html> 无意外 margin/padding 干扰；建议重置 CSS：html, body { margin: 0; padding: 0; }；
- 性能优化：对频繁 resize 场景，可添加防抖（debounce）逻辑，避免高频重绘；
- 移动端适配：部分 iOS Safari 对 scrollHeight 计算有延迟，可补充 setTimeout(sendSize, 100) 或监听 DOMContentLoaded。
✅ 总结
iframe 自适应高度不是“设置一个 CSS 属性”就能解决的问题，而是涉及浏览器安全模型与跨上下文通信的系统性实践。采用 postMessage 方案，既满足了功能需求，又坚守了同源策略底线。只要父子页面协同约定好消息格式与校验规则，即可稳定、安全、高效地实现内容驱动的 iframe 尺寸自适应。
