在前端开发中，我们经常需要与其他域名下的页面进行通信。然而，由于浏览器的同源策略（Same-Origin Policy），JavaScript 脚本只能访问与当前页面同源的资源，无法跨域访问其他页面。
为了解决这个问题，HTML5 引入了 window.postMessage 方法。该方法可以实现不同域名下的窗口之间相互通信，而不受 SOP 的限制。
postMessage() 方法
postMessage() 是 Window 接口的一个方法，用于向其他窗口传递信息。
otherWindow.postMessage(message, targetOrigin, [transfer]);
它接收三个参数：
message: 所要发送的数据。可以是任意基本类型或可复制的对象。targetOrigin：指定目标窗口的源，格式为协议 + 主机名 + 端口号。如果不确定目标窗口的源，可以将此参数设置为“*”，表示任意源。transfer(optional)：可选项，表示要传递的对象是否应被转移所有权，从而避免复制大量数据。
如何使用 postMessage() 跨域通信？
下面是一个例子：假设有两个网站，一个是 https://example.com，另一个是 https://www.example.net。我们需要在这两个网站之间实现通信。
在父窗口中发送消息
var childWindow = window.open('https://www.example.net', 'child');
var message = {
data: 'Hello, child!'
};
childWindow.postMessage(message, 'https://www.example.net');在此示例中，我们通过 window.open() 方法打开一个新窗口，并将其赋值给变量 childWindow。然后，我们定义了一个包含数据的对象 message，并将其作为第一个参数传递给 postMessage() 方法。最后，我们将目标源设置为 https://www.example.net。
在子窗口中接收消息
window.addEventListener('message', function(event) {
if (event.origin !== 'https://example.com') return;
var message = event.data;
console.log('Received message from parent:', message);
});在子窗口中，我们使用 window.addEventListener() 方法监听 message 事件。当父窗口调用 postMessage() 方法发送消息时，子窗口会触发 message 事件并执行回调函数。在回调函数中，我们首先检查消息的来源是否为 https://example.com，以防止恶意网站发送虚假信息。然后，我们获取消息内容，并将其输出到控制台。
总结
使用 window.postMessage() 可以轻松地实现不同域名之间的通信。但是，在使用它时，必须小心谨慎，避免被黑客利用。下面是一些建议：
- 确保目标源是否正确，避免接收到来自不可信的网站的消息。
- 不要在被攻击者的页面中使用 postMessage() 方法，以防止被注入恶意代码。
- 只接收来自指定源的信息，避免接收到不受欢迎的消息。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12238