Javascript如何进行跨域通信？

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 创建端对端通道。

标签： javascript java android js json 微信 端口 safari win 跨域