postMessage的几种使用方式

postMessage函数是用来在两个窗口之间进行通讯的方法，可以在区分窗口之间传递消息。它有几种使用方式：
1. 单向通讯：在一个窗口中调用postMessage函数发送消息，另外一个窗口通过监听message事件来接收消息。示例代码以下：
发送消息的窗口：
```javascript
window.postMessage('Hello', 'https://example.com');
```
接收消息的窗口：
```javascript
window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log(event.data); // 输出: Hello
}
});
```
2. 双向通讯：在两个窗口之间建立一个通讯通道，可以通过该通道双向传递消息。示例代码以下：
窗口1：
```javascript
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为同域的页面）：
```javascript
window.addEventListener('message', function(event) {
if (event.source === iframe.contentWindow) {
event.ports[0].postMessage('World');
}
});
```
3. 在同一个窗口中的区分上下文之间通讯：在同一个窗口中的区分上下文之间可使用postMessage函数进行通讯。示例代码以下：
窗口1（主窗口和iframe中的脚本区分源）：
```javascript
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中的脚本）：
```javascript
window.parent.postMessage('Hello', '*');
```
这些是postMessage的几种常见使用方式，可以根据具体需求选择适合的方式进行通讯。