移动端 iframe 高度自适应必须用 postMessage：子页在 DOMContentLoaded 和 resize 时延时发送 documentElement.scrollHeight，父页严格校验 origin、source 和 type 后动态设高。
移动端 iframe 高度自适应必须用 postMessage，别试 onload + scrollHeight
移动端 Safari 和 Chrome for iOS 对 iframe 的 DOM 访问限制更严格，哪怕同域，iframe.contentDocument 在某些加载时机下也会返回 null 或触发 SecurityError。尤其在 PWA、微信 WebView、支付宝小程序 WebView 中，onload 后立即读 scrollHeight 几乎必然取到 0 或错误值。这不是代码写错了，是 WebView 内核的渲染时序问题。
真正能落地的方案只有一条路：子页面主动上报高度，父页面监听 message 并校验来源。
- 子页必须在
DOMContentLoaded和window.resize两个时机都发消息，移动端屏幕旋转、键盘弹起都会触发 resize - 父页不能只监听一次，要持续接收，因为内容可能动态加载（比如懒加载图片、Vue 组件挂载后 height 变化）
- 务必用
event.origin校验，别用'*'—— 微信和 QQ 内置浏览器对通配符拦截越来越严
子页面怎么发高度消息才不丢、不误判
子页发消息不是“写完就完”，得考虑移动端特有的延迟和重排场景。直接读 document.body.scrollHeight 在 iOS 上经常偏小，因为字体加载、图片解码还没完成。
推荐用这个组合：
立即学习“前端免费学习笔记（深入）”；
- 优先读
document.documentElement.scrollHeight，它比body.scrollHeight更稳定，尤其在box-sizing: border-box或html { height: 100% }场景下 - 加一层
setTimeout(() => { /* 发消息 */ }, 100)，等渲染管线跑完一帧，避免取到未重排前的高度 - 监听
resize时，加防抖（clearTimeout+setTimeout），否则键盘弹起/收起会高频触发，导致父页反复设 height 影响性能 - 如果子页用了 Vue/React，要在
mounted/useEffect里调用发消息函数，不能只靠DOMContentLoaded
示例子页代码片段：
function sendHeight() {
const h = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
window.parent.postMessage({ type: 'iframeHeight', height: h }, 'https://your-parent-domain.com');
}
document.addEventListener('DOMContentLoaded', () => setTimeout(sendHeight, 100));
window.addEventListener('resize', () => {
clearTimeout(window.__resizeTimer);
window.__resizeTimer = setTimeout(sendHeight, 100);
});父页面监听 message 的几个硬性条件
父页接消息不是写个 addEventListener('message', ...) 就完事。移动端 WebView 对 event.source 和 event.origin 的校验更苛刻，漏掉任一条件都可能失效。
- 必须校验
event.source === iframe.contentWindow，防止其他 iframe 或弹窗干扰 -
event.origin必须精确匹配子页域名，包括协议（https://不等于http://），iOS 微信中甚至要求端口一致 - 消息体必须含
type字段，且值为预设字符串（如'iframeHeight'），避免被第三方脚本伪造 - 设置高度前，先做最小高度兜底：
iframe.style.height = Math.max(data.height, 200) + 'px'，防止空内容或加载失败时 iframe 崩塌
父页监听逻辑关键点：
const iframe = document.getElementById('myFrame');
window.addEventListener('message', (e) => {
if (
e.source !== iframe.contentWindow ||
e.origin !== 'https://child-domain.com' ||
e.data.type !== 'iframeHeight'
) return;
iframe.style.height = Math.max(e.data.height, 200) + 'px';
});为什么 ResizeObserver 在 iframe 内部不可靠
有人想在子页里用 ResizeObserver 监听 document.body，再发消息——这在桌面 Chrome 没问题，但在 iOS Safari 16+ 和 Android WebView 中，ResizeObserver 对 body 的监听基本无效。它只对显式设置了 display 或 position 的元素生效，而 body 是文档根容器，多数情况下不触发回调。
更实际的问题是：ResizeObserver 不监听字体加载、图片解码、CSS 动画结束这些影响最终高度的事件。移动端页面常有 WebFont、LazyLoad 图片，它们完成时间远晚于 DOM 加载，这时候靠 ResizeObserver 就会漏掉高度变化。
所以结论很明确：子页发消息的触发点，只能是明确的业务时机（如组件 mount、AJAX success、用户操作后）+ resize + setTimeout 延迟兜底，不能依赖任何“自动监听”机制。
