17370845950

JavaScript跨域通信的核心方法是postMessage，它安全、标准、兼容IE8+，适用于iframe、弹窗、Web Worker等双向实时通信场景；其他方式如CORS、JSONP主要用于单向数据请求。

JavaScript 跨域通信的核心方法是 postMessage，它安全、标准、兼容性好（IE8+），适用于 iframe、弹窗、Web Worker 等场景。其他方式如 CORS、JSONP、代理等主要用于请求数据，而非“通信”——即双向、实时、上下文可控的消息交互。

用 postMessage 实现 iframe 跨域通信

父页面与嵌入的跨域 iframe 可通过 window.postMessage() 发送消息，并用 message 事件监听响应。

• 发送方调用 iframe.contentWindow.postMessage(data, targetOrigin)，targetOrigin 必须写具体协议+域名（如 "https://example.com"），不可用 "*"（除非完全信任）
• 接收方需在 window.addEventListener('message', handler) 中校验 event.origin 和 event.source，防止伪造来源
• 消息体 data 会自动序列化（仅支持可结构化克隆的对象，不支持函数、DOM 节点等）

弹窗（window.open）间的跨域通信

父页面打开跨域子窗口后，可保存其引用（const child = window.open(...)），后续用 child.postMessage() 发送；子窗口可通过 window.opener 向父页发消息。

• 子窗口首次发消息前，需确保父页已监听 message 事件（可加简单重试或 ready 信号）
• 关闭前建议清理监听器（removeEventListener），避免内存泄漏
• 注意：Safari 对弹窗的 window.opener 有严格限制（尤其隐私模式），需降级处理

配合 MessageChannel 实现更精细的通信通道

当需要多个独立、双向、低耦合的通信流（例如多个 iframe 或 worker），可用 MessageChannel 创建端对端通道。

• 创建后得到两个 MessagePort 对象，分别传给通信双方（通过 postMessage(port, [port])）
• 任一端调用 port.postMessage()，另一端监听 port.onmessage 即可，无需校验 origin
• 适合高频、模块化通信，但需手动管理端口启停（port.start()、port.close()）

注意事项与常见坑

跨域通信不是万能的，安全和健壮性必须前置考虑。

• 永远验证 event.origin，不只看域名，还要核对协议（https vs http）
• 避免在 message 回调中直接操作 DOM 或执行高耗时逻辑，必要时用 setTimeout 或 queueMicrotask
• iframe 加载完成前调用 contentWindow.postMessage 会失败，应监听 load 事件后再通信
• 移动端 WebView（如微信内嵌）对 postMessage 支持良好，但部分老 Android WebKit 有 bug，建议加 try-catch

基本上就这些。真正用起来不复杂，但容易忽略 origin 校验和加载时机，导致调试困难或安全风险。