跨文档通信通过postMessage实现，允许不同源窗口安全传递数据。①使用postMessage发送消息，如向iframe发送：iframe.contentWindow.postMessage(‘Hello’, ‘https://example.com’)，第一个参数为可序列化数据，第二个为目标源；②接收方监听message事件，验证event.origin并处理event.data；③可通过event.source回传消息。应用于主页面与第三方iframe交互、多标签页状态共享、弹出窗口传令牌等场景。正确验证origin可确保通信安全。
跨文档通信（Cross-Document Messaging）在JavaScript中通过 postMessage() 方法实现，允许不同源的窗口之间安全地传递数据。这种机制常用于 iframe 与父页面、弹出窗口或不同标签页之间的通信。
使用 postMessage 发送消息
要向另一个窗口发送消息，调用目标窗口的 postMessage() 方法，传入数据和目标源（origin）。这个方法接受两个参数：要发送的数据和目标窗口的协议、主机和端口（即源策略）。
示例：向 iframe 发送消息
假设有一个 iframe，可以通过 contentWindow 访问其窗口对象：
const iframe = document.getElementById('myIframe');// 发送消息iframe.contentWindow.postMessage('Hello from parent!', 'https://example.com');
说明：第一个参数可以是字符串、对象、数组等可序列化的数据。 第二个参数是目标窗口的源，用于安全控制。设置为 * 表示任意源，但不推荐用于生产环境。
监听 message 事件接收消息
接收方需要监听全局的 message 事件，从事件对象中提取发送方、数据和源信息。
window.addEventListener('message', function(event) { // 检查消息来源是否可信 if (event.origin !== 'https://trusted-site.com') { return; } // 处理接收到的数据 console.log('收到消息:', event.data); console.log('来自:', event.origin);});
关键点：event.data 是发送的数据内容。 event.origin 表示发送方文档的源，必须验证以防止恶意攻击。 event.source 可用于回传消息，例如：event.source.postMessage('收到！', event.origin);
常见应用场景
跨文档通信适用于多种实际场景：
立即学习“Java免费学习笔记（深入）”；
主页面与嵌入的第三方 iframe 进行交互（如支付、登录）。 多个标签页之间共享状态（结合 localStorage 和 message 通知）。 弹出认证窗口后将令牌传回主页面。
基本上就这些。只要正确使用 postMessage 和验证 origin，就能实现安全、有效的跨域通信。
以上就是在JavaScript中，如何实现跨文档通信（Cross-Document Messaging）？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530674.html
微信扫一扫 
支付宝扫一扫 
