postMessage是唯一可靠、通用且现代浏览器全支持的跨域iframe通信方案；需监听load后发送、校验event.origin、避免使用'*'、子页面早注册message监听器，并防范时序与安全风险。
iframe 嵌套页面本身没有问题，但只要涉及 JavaScript 交互，跨域就会立刻拦住你——不是配置没配好，是浏览器强制不让你碰；唯一可靠、通用、现代浏览器全支持的方案，只有 postMessage。
怎么安全地用 postMessage 发消息给跨域 iframe
父页面不能直接调用 iframe.contentWindow.someFunc()，也不能读 iframe.contentDocument，一碰就报 SecurityError: Blocked a frame with origin "https://a.com" from accessing a cross-origin frame.。必须走消息通道。
关键点不是“能不能发”，而是“怎么发才不被忽略、不被恶意截获”：
-
iframe必须已加载完成，否则contentWindow可能为null，或postMessage静默失败 —— 一定要监听load事件再发 -
postMessage第二个参数（targetOrigin）不能写'*'，除非你 100% 控制 iframe 的所有可能加载地址；推荐明确写成'https://child.example.com' - 发送前检查
iframe.contentWindow是否存在，避免Cannot read property 'postMessage' of null
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
if (iframe.contentWindow) {
iframe.contentWindow.postMessage(
{ type: 'INIT', theme: 'dark', userId: 123 },
'https://child.example.com'
);
}
});
子 iframe 怎么收消息并校验来源
子页面监听 message 事件时，event.origin 是唯一可信的身份标识。不校验就处理，等于把数据接口裸露给任意网站。
常见错误：只比对 event.data.type，却放行了 event.origin === 'https://evil.com' 的请求。
- 必须用严格相等（
===）比对event.origin，不能用includes或正则模糊匹配 -
event.data是结构化克隆对象，支持普通对象、数组、Date、RegExp，但不支持函数、undefined、DOM节点 - 如果父页可能从多个域名加载该 iframe（比如测试环境 vs 生产），需在
event.origin列表中白名单校验
window.addEventListener('message', (event) => {
if (event.origin !== 'https://parent.example.com') return;
console.log('合法消息:', event.data);
// 处理逻辑...
});
为什么 document.domain 不是跨域解法
document.domain 只适用于「同主域、不同子域」场景，比如 a.shop.example.com 和 b.shop.example.com。它本质是降级同源判定粒度，并非突破跨域。
- 对
example.com和other-site.com完全无效 - 现代浏览器（Chrome 92+、Firefox 89+）已废弃对
document.domain的跨域 DOM 访问支持，即使设了也拿不到contentDocument - 一旦启用，整个页面的同源策略都会变松，有潜在 XSS 风险，新项目应避免使用
双向通信要防哪些坑
父页发完消息，子页回传，看似简单，实际容易陷入“谁先监听、谁后发”的时序陷阱。
- 子 iframe 的
message监听器必须在DOMContentLoaded或更早注册，否则可能错过父页首条消息 - 父页收到子页回复时，也要校验
event.source（确保是目标 iframe 发来的），不能只信event.origin - 不要在消息里传大对象（如完整 DOM 树、base64 图片），会阻塞主线程；大数据建议分片或换用
SharedArrayBuffer（需 HTTPS +crossOriginIsolated）
真正难的不是写通第一条消息，而是让通信在 iframe 动态加载、重载、异常中断后仍稳定可恢复——这需要加超时、重试、消息 ID 和确认机制，而这些都得自己补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
