HTML中iframe父子通信技巧

本文深入解析了HTML中iframe父子页面通信的核心技巧与常见陷阱：同源场景下必须等待iframe的load事件完成才能安全访问contentWindow，避免因时机不当导致的null引用或跨域错误；contentDocument与contentWindow.document在同源时等价，但前者兼容性更优，尤其适合处理srcdoc内联内容；跨域通信则唯一依赖postMessage机制，且必须严格校验origin以保障安全性；文章还对比了URL参数、postMessage和srcdoc三种传参方式的适用边界，并强调竞态问题——即使同源，document可能尚未就绪，需通过子页主动通知而非轮询来可靠同步状态。

iframe.contentWindow 在同源场景下怎么安全取到子页面 window 对象

必须等 iframe 完全加载（load 事件触发后）才能访问 contentWindow，否则返回 null 或报错 Blocked a frame from accessing a cross-origin frame（即使同源也常因时机不对触发）。

推荐写法是：先监听 iframe.onload，再取 iframe.contentWindow；不要在 DOM 就绪后立即操作，尤其当 src 是远程 URL 时。

• 用原生 JS： iframe.addEventListener('load', () => { const win = iframe.contentWindow; /* 此时可用 */ });
• IE8–9 需兼容：iframe.attachEvent('onload', ...)，但现代项目可忽略
• jQuery 不推荐链式调用：$('#myframe').get(0).contentWindow 比 $('#myframe')[0].contentWindow 更明确，避免 jQuery 版本差异导致的隐式转换问题

为什么有时 contentWindow.document 报错而 contentDocument 却可以

contentWindow 返回的是子页面的 window 对象，contentDocument 返回的是子页面的 document 对象——两者不是互斥关系，而是层级关系：contentWindow.document === contentDocument（同源前提下）。

常见错误是直接写 iframe.contentWindow.document.body 却没检查 contentWindow 是否为 null，或子页面还没解析完 body 节点。

• 稳妥写法：const doc = iframe.contentDocument || iframe.contentWindow?.document;
• 旧版 IE6/7 不支持 contentDocument，必须用 contentWindow.document
• 若 iframe 使用了 srcdoc 属性（而非 src），且未设 sandbox，它默认与父页同源，contentDocument 可靠性更高

跨域 iframe 下调用 contentWindow 的实际限制有哪些

跨域时 contentWindow 不为 null，但几乎全部属性和方法被屏蔽：读取 contentWindow.location 报错、访问 contentWindow.document 返回 null、调用 contentWindow.postMessage 是唯一合法出口。

此时你不能通过 contentWindow 操作 DOM、读取 Cookie、执行脚本，也不能判断子页面是否加载完成（onload 仍可触发，但无法进一步验证状态）。

• 跨域通信只能靠 postMessage + message 事件，且必须校验 event.origin
• contentWindow.postMessage('data', 'https://trusted.com') 中第二个参数不能写 *（除非你完全信任任意来源）
• 子页面需主动监听：window.addEventListener('message', e => { if (e.origin === 'https://parent.com') { /* 处理 */ } })

父页向 iframe 传参的三种可行方式（按推荐度排序）

别试图在 contentWindow 上挂全局变量（如 win.username = 'xxx'），这在跨域下无效，在同源下也易被子页 JS 覆盖或误删。

• 最稳：用 postMessage 发送初始化数据，子页监听并存入内存或 localStorage
• 次选：URL 参数传参，如