postMessage的几种使用方式

postMessage函数是用来在两个窗口之间进行通信的方法，可以在不同窗口之间传递消息。它有几种使用方式：

单向通信：在一个窗口中调用postMessage函数发送消息，另一个窗口通过监听message事件来接收消息。示例代码如下：

发送消息的窗口：

window.postMessage('Hello', 'https://example.com');

接收消息的窗口：

window.addEventListener('message', function(event) {if (event.origin === 'https://example.com') {console.log(event.data); // 输出: Hello}});

双向通信：在两个窗口之间建立一个通信通道，可以通过该通道双向传递消息。示例代码如下：

窗口1：

var channel = new MessageChannel();var iframe = document.querySelector('iframe');iframe.contentWindow.postMessage('Hello', '*', [channel.port1]);channel.port2.addEventListener('message', function(event) {console.log(event.data); // 输出: World});channel.port2.start();

窗口2（iframe的src为同域的页面）：

window.addEventListener('message', function(event) {if (event.source === iframe.contentWindow) {event.ports[0].postMessage('World');}});

在同一个窗口中的不同上下文之间通信：在同一个窗口中的不同上下文之间可以使用postMessage函数进行通信。示例代码如下：

窗口1（主窗口和iframe中的脚本不同源）：

window.addEventListener('message', function(event) {if (event.origin === 'https://example.com') {console.log(event.data); // 输出: Hello}});var iframe = document.querySelector('iframe');iframe.contentWindow.postMessage('Hello', 'https://example.com');

窗口2（iframe中的脚本）：

window.parent.postMessage('Hello', '*');

这些是postMessage的几种常见使用方式，可以根据具体需求选择合适的方式进行通信。