同源时可用parent/contentWindow直接调用函数或操作DOM；跨域必须用postMessage，否则触发SecurityError。同源要求协议、域名、端口完全一致，跨域通信需双方配合监听与发送，并严格校验event.origin防止XSS风险。
同源时直接用 window.parent 或 contentWindow 调用函数或读写 DOM；跨域必须用 postMessage，否则会触发 SecurityError。
同源下用 parent / contentWindow 直接调用函数
只要 iframe 的 src 与父页面协议、域名、端口完全一致，就能绕过沙箱限制，直接互相访问全局对象。
- 子页面调父页面函数：
window.parent.someFunction()，window.parent可简写为parent - 父页面调子页面函数：
document.getElementById('myIframe').contentWindow.childFunc()，也可用window.frames['frameName'].childFunc() - 注意 iframe 必须已加载完成，否则
contentWindow为null；建议监听iframe.onload或用DOMContentLoaded后延时检查 - DOM 操作也同理：子页可改父页元素
parent.document.getElementById('x').innerText = 'ok'；父页可操作子页 DOMiframe.contentDocument.getElementById('y')
跨域通信唯一可靠方式是 postMessage
postMessage 是浏览器原生支持的跨域通信机制，不依赖同源策略，但需双方主动配合监听和发送。
- 父页发消息给子页：
iframe.contentWindow.postMessage({data: 'hello'}, 'https://example.com')，targetOrigin不能写'*'（除非你明确接受任意来源） - 子页发消息给父页：
window.parent.postMessage({type: 'ready'}, 'https://parent-domain.com') - 接收方必须加
origin校验：if (event.origin !== 'https://trusted.com') return;，否则存在 XSS 风险 - 监听必须在全局作用域注册：
window.addEventListener('message', handler)，且不能用箭头函数（会丢失this绑定）
常见错误：Failed to execute 'postMessage' on 'DOMWindow'
这个错误几乎都源于目标窗口尚未就绪或引用失效，不是权限问题。
立即学习“前端免费学习笔记（深入）”；
-
iframe.contentWindow为空：iframe 还没加载完，或src是空字符串、about:blank、javascript:void(0)等特殊值 - 跨域 iframe 的
contentWindow在某些浏览器（如 Safari）中可能被完全屏蔽，此时只能靠postMessage，别试图读取 - 父页监听写在子页加载前：应确保
window.addEventListener('message', ...)在页面初始化阶段就注册，不要等某个按钮点击才加 - 消息格式误用：
postMessage第一个参数必须可序列化，function、undefined、Symbol、DOM node会静默丢弃
localStorage / document.domain 不是通用解法
它们只在特定条件下有效，容易误用导致功能失效或安全漏洞。
-
localStorage仅限同源，且是异步写入+轮询读取，无法实时响应，也不适合传递复杂结构或触发行为 -
document.domain仅适用于主域相同、子域不同的场景（如a.example.com↔b.example.com），且要求双方显式设置相同值，现代开发中已基本被postMessage替代 - 第三方 iframe（如支付、地图）几乎从不开放
localStorage权限，也不允许你改它的document.domain
真正难的不是写通通信逻辑，而是判断何时该用 parent、何时必须用 postMessage，以及在后者中严格校验 event.origin —— 很多人漏掉这一步，上线后才发现被恶意站点伪造消息。
