跨文档消息传递(Cross-document messaging)指的是不同域名下的网页彼此通信的方式。
在JavaScript中,可以使用postMessage()方法实现跨文档消息传递。postMessage()方法接收两个参数:
- message:要发送的消息
- targetOrigin:指定接收消息的窗口的源,可以是 URL 或 ‘*’ (表示任何源)
例如,a.html 发送消息给 b.html:
a.html:
window.opener.postMessage('Hello', 'http://b.com');
b.html:
window.addEventListener('message', function(e) {
console.log(e.data); // 'Hello'
console.log(e.origin); // http://a.com
}, false);
跨文档消息传递有以下主要应用场景:
- 父子窗口通信:用于打开的新窗口/iframe 与父窗口通信。
- 跨域通信:两个不同域名的网页相互通信。因为同源政策的限制,一般不支持跨域通信,postMessage 提供了一种补充方案。
- 页面模块通信:一个网站中的不同页面或模块之间通信,避免直接暴露全局变量。
postMessage 方法的特点:
- 发送端不需要知道接收端 window 对象的引用,只需要知道接收端的源。
- 消息通过异步方式发送,不会影响程序的当前执行过程。
- 同源策略限制被绕过,可以实现跨域通信。
- 增加了消息安全性,只有指定的来源才能接收消息事件。
可以看出,postMessage 是一种安全可靠的跨窗口通信方式,在 web 开发中有着广泛的应用场景。
它允许跨窗口和跨域(域名不同)的脚本进行通信,同时又能保证安全性,这为 web 开发带来了极大的便利。有了它,我们可以打通ного稍微复杂的 web 项目中的不同模块,实现更加完美的用户体验。