iframe高度同步必须用JavaScript动态调整：同源时子页通过postMessage上报scrollHeight；跨域时须双向origin校验；动态内容需ResizeObserver监听，IE11以下可轮询替代。
iframe 高度同步不能靠 CSS 自动解决，必须用 JavaScript 动态调整。关键看父子页面是否同源——同源可直接读取 DOM；跨域则必须用 postMessage 通信，这是唯一安全可靠的方式。
同源场景：子页面主动上报高度
子页面加载完成或内容变化后，自行计算真实高度并通知父页面设置 iframe 样式。这种方式逻辑集中、性能好、代码简洁。
- 子页监听
DOMContentLoaded、load和resize（如含动态渲染） - 每次触发时调用
document.documentElement.scrollHeight获取实际高度 - 通过
window.parent.postMessage({ type: 'height', value: height }, '*')发送消息 - 父页监听
message事件，校验event.origin后更新iframe.style.height
跨域场景：必须用 postMessage 双向校验
父页面无法直接访问跨域 iframe 的 DOM，强行读取会报错或返回 null。只能依赖子页主动上报，且父页必须严格验证来源，否则可能被恶意页面伪造高度撑爆布局。
- 子页发送消息时，建议指定目标 origin（如
'https://example.com'），避免用'*' - 父页收到消息后，先检查
event.origin是否可信，再解析event.data - 只接受
type === 'height'且value是合法数字的消息 - 设置
iframe.style.height = value + 'px'，并确保scrolling="no"消除滚动条
动态内容场景：配合 ResizeObserver 实时响应
如果子页内容会随用户操作（如展开折叠、加载更多）而变化，仅靠初始加载不够。需在子页内用 ResizeObserver 监听 body 或容器尺寸变化，触发重新上报。
立即学习“前端免费学习笔记（深入）”；
- 创建观察器监听
document.body或主内容区域 - 回调中调用
sendHeight()函数，避免重复发相同高度 - 父页收到新高度后，平滑过渡可用
transition: height 0.2s ease
兼容性与细节提醒
IE11 不支持 ResizeObserver，但 postMessage 兼容 IE8+。若需支持旧浏览器，子页可用定时器轮询 document.body.scrollHeight 变化，不过开销略大。
- iframe 标签记得加
frameborder="0"和allowtransparency="true"消除边框和背景干扰 - 父页设置高度时优先用
style.height，而非setAttribute('height', ...)，后者会强制像素值且不易覆盖 - 子页若用 Vue/React 等框架，应在
mounted或useEffect中初始化高度上报逻辑
