在HTML5中，我们常常需要处理跨窗口通讯的问题。比如在一个页面内嵌一个iframe，需要与iframe内的页面进行交互，或者在不同的页面之间传递信息。这时候，我们就需要使用HTML5中提供的跨窗口通讯方法——PostMessage。

PostMessage能够实现跨域、跨窗口、跨文档对象模型（DOM）的消息传递，让不同的窗口之间能够互相通讯，达到相互配合的效果。

一、PostMessage的基本使用

PostMessage可以向其他窗口发送一个消息，并且不需要知道该窗口的URL地址。在使用PostMessage的过程中，需要指定接收消息的窗口对象，可以是指定URL地址的窗口，也可以是窗口对象本身。PostMessage语法如下：

targetWindow.postMessage(message, targetOrigin);

其中，message表示要发送的消息内容；targetOrigin表示接收消息的窗口所在的URL，如果该参数为"*"，则表示接收任何域的窗口都可以。

例如，以下代码可以向指定窗口发送一个消息：

let targetWindow = window.frames[0];

let message = 'hello, child window!';

let targetOrigin = 'http://child.example.com';

// 向子窗口发送消息

targetWindow.postMessage(message, targetOrigin);

这段代码中，我们获取了子窗口的window对象，然后使用PostMessage向指定子窗口发送了一条消息。

二、PostMessage的安全性

PostMessage可以解决同源策略限制，使得跨域通讯变得简单，但由于PostMessage没有任何限制，可以跨越任何边界，因此它也有一定的安全风险。

在使用PostMessage时，我们需要注意以下几点：

1. targetOrigin应该设置明确的值，在接收消息时，如果targetOrigin与实际窗口不匹配，则该消息将被忽略。

2. PostMessage传递的消息需要进行严格的校验，防止代码注入或其他恶意攻击。

3. 接收消息的窗口对发送的内容进行检查，并且不要信任发送过来的信息，防止被攻击者窃取重要信息。

三、PostMessage的具体应用

1. 页面间通讯

当我们需要在不同的页面之间进行通讯时，可以使用PostMessage。例如，在A页面中，点击一个按钮，需要跳转到B页面，并且将一些信息传递给B页面，可以使用以下代码：

// A页面

let targetWindow = window.open('http://example.com/b.html');

let message = 'hello, B!';

let targetOrigin = 'http://example.com';

targetWindow.postMessage(message, targetOrigin);

// B页面

window.addEventListener('message', function(event) {

if (event.origin !== 'http://example.com') {

console.log('收到的消息不是从正确的站点发出的');

return;

}

console.log('收到的消息为：' + event.data);

});

在A页面中，我们打开一个新的窗口，然后使用PostMessage向该窗口发送了一条消息；在B页面中，我们监听message事件，然后对收到的消息进行处理。

2. iframe和父页面之间的通讯

当我们需要在一个页面内嵌一个iframe，并且想要与iframe内的页面进行交互时，可以使用PostMessage。例如，以下代码可以在父页面与iframe内的页面之间进行通讯：

// 父页面

let iframe = document.getElementById('myIframe');

let message = 'hello, child window!';

let targetOrigin = 'http://child.example.com';

iframe.contentWindow.postMessage(message, targetOrigin);

// 子页面

window.addEventListener('message', function(event) {

if (event.origin !== 'http://parent.example.com') {

console.log('收到的消息不是从正确的站点发出的');

return;

}

console.log('收到的消息为：' + event.data);

});

在父页面中，我们获取了iframe元素，然后使用PostMessage向iframe内的页面发送了一条消息；在iframe内的页面中，我们监听message事件，然后对收到的消息进行处理。

3. 同域的不同窗口之间的通讯

在同一个站点内，不同的窗口之间也可以实现消息传递。例如，我们在一个页面中打开了两个窗口，可以使用以下代码进行消息传递：

// 窗口1

let targetWindow = window.open('http://example.com/b.html');

let message = 'hello, window2!';

let targetOrigin = 'http://example.com';

targetWindow.postMessage(message, targetOrigin);

// 窗口2

window.addEventListener('message', function(event) {

if (event.origin !== 'http://example.com') {

console.log('收到的消息不是从正确的站点发出的');

return;

}

console.log('收到的消息为：' + event.data);

});

在窗口1中，我们打开了一个新的窗口，然后向该窗口发送消息；在窗口2中，我们监听message事件，然后对收到的消息进行处理。

四、总结

PostMessage是HTML5中常用的跨窗口通讯方法，可以实现跨域、跨窗口、跨文档对象模型（DOM）的消息传递。

在使用PostMessage时，需要注意安全性问题，设置明确的targetOrigin并对传递的消息进行严格的校验。

PostMessage可以应用于页面间通讯、iframe和父页面之间的通讯、同域的不同窗口之间的通讯等多种场景，可以实现不同窗口之间的互相配合。