跨文档消息传递通过postMessage实现安全跨域通信。1. 发送方调用targetwindow.postMessage(message, targetOrigin)发送数据；2. 接收方监听window的message事件接收消息；3. 接收方验证Event.origin和event.data确保来源可信与数据合规。应用于iframe交互、登录窗口传参等场景。
JavaScript跨文档消息传递（Cross-document messaging），通常称为XDM，是一种允许不同域的网页之间安全通信的机制。它解决了同源策略带来的限制，让嵌入的
核心方法：postMessage
该机制的核心是 postMessage() 方法，这是html5规范提供的API，用于向其他窗口发送消息。
- 发送消息：调用 targetWindow.postMessage(message, targetOrigin)。其中，targetWindow 是目标窗口的引用（如 iframe 的 contentWindow 或 window.open() 返回的对象），message 是要发送的数据，targetOrigin 指定了接收窗口的源（协议+域名+端口），以确保消息只被发送到预期的目的地，这是关键的安全措施。
- 接收消息：在接收消息的窗口中，需要监听全局 window 对象上的 ‘message’ 事件。通过 window.addEventListener(‘message’, callback) 来设置事件处理器。
确保通信安全
为了防止恶意网站截获或伪造消息，安全验证至关重要。
- 在接收方的 ‘message’ 事件处理函数中，必须检查事件对象的 event.origin 属性，确认消息来源是否可信。如果来源不匹配预设的可信源，应当忽略该消息。
- 可以进一步检查 event.data 的格式和内容，确保其符合预期的消息协议。
典型应用场景
这种技术广泛应用于需要跨域集成的场景。
立即学习“Java免费学习笔记（深入）”；
- 主页面与嵌入的第三方
- 由主站打开的独立登录窗口，在登录成功后将凭证安全地传递回主页面。
- 实现父子页面间的指令控制，例如主页面通知iframe执行特定动画或更新内容。
基本上就这些，掌握 postMessage 的发送、接收和安全验证三步，就能实现安全的跨文档通信。