根本原因是浏览器同源策略硬性拦截，只要协议、域名、端口任一不同，contentDocument即为null且抛SecurityError；唯一合规方案是postMessage，须严格校验origin与targetOrigin，DOM操作由子页自行执行。
跨域 iframe 无法读取 contentDocument 的根本原因
不是代码写错了，是浏览器直接禁止——只要 origin 不同（协议、域名、端口任一不一致），iframe.contentDocument 就是 null，连 scrollHeight 都拿不到。这不是兼容性问题，是同源策略的硬性拦截，任何试图绕过它的 DOM 直接访问都会抛出 SecurityError。
常见错误现象：在控制台看到 Cannot read property 'body' of null 或 Blocked a frame with origin "https://a.com" from accessing a cross-origin frame.。这时候别查 jQuery 写法，先确认是否跨域。
可验证方式：在父页 console 执行 document.querySelector('iframe').contentWindow.location.origin，如果报错或返回 about:blank，基本就是跨域了。
postMessage 是唯一可靠且标准的跨域通信通道
它不是“一种方案”，而是目前唯一被所有现代浏览器支持、无需服务端配合、不依赖 document.domain 或 hash hack 的原生机制。但用不好反而更危险。
立即学习“前端免费学习笔记（深入）”；
生产级使用必须满足三点：
- 发送方明确指定目标
origin，不能用*——比如子页发给父页要写window.parent.postMessage(data, 'https://parent.com') - 接收方严格校验
event.origin，过滤非预期来源，避免 XSS 注入 - 消息体建议用
JSON.stringify()发送，接收方用JSON.parse()解析，避免原始字符串误判
示例（子页发送高度）：
const height = document.documentElement.scrollHeight;<br>window.parent.postMessage(JSON.stringify({ type: 'HEIGHT', height }), 'https://parent.com');
高度同步必须由子页主动触发，且时机关键
子页不能只在 load 事件里发一次高度——懒加载图片、React useEffect 渲染、折叠面板展开都可能后续改变高度。靠父页轮询或定时器去“猜”高度，既不准又耗资源。
正确做法是监听内容区域变化：
- 优先用
ResizeObserver监听最外层容器（如.app-root或document.body） - fallback 到
MutationObserver+setTimeout(() => {}, 0)组合，覆盖无 ResizeObserver 的旧环境 - 每次检测到尺寸变化，立即发新
postMessage，不要合并或节流——滚动中高度可能突变
注意：不要监听 window 的 resize，那是视口变化，和 iframe 内容高度无关。
父页设置 iframe 高度时的样式陷阱
即使收到了正确的高度值，iframe.style.height = height + 'px' 仍可能失效，常见原因：
-
iframe父容器设置了overflow: hidden或max-height，把撑开的高度截断了 - 子页
body有默认margin（如 8px），导致scrollHeight比视觉高度多出这部分，需在子页重置：body { margin: 0; } - CSS 中用了
box-sizing: border-box但没统一应用到所有层级，导致 padding/border 计算偏差 - 父页 iframe 元素本身设置了
vertical-align: baseline，引发额外行内间隙
最简健壮写法：
iframe {<br> display: block;<br> width: 100%;<br> border: none;<br> margin: 0;<br> padding: 0;<br>}
复杂点在于子页渲染节奏不可控，哪怕用了 ResizeObserver，首次测量也可能早于字体加载或 WebFont 就绪——这需要子页自己做 font load 检测后再触发第一次高度上报，否则首屏高度仍会偏低。
