html页面内嵌iframe使用postMessage进行数据交互（postMessage跨域通信）

HTML页面内嵌IFrame并利用`postMessage`进行跨域数据交互的基本流程如下：

1. **发送消息**[^1]:
在父窗口（通常是指包含IFrame的页面），你可以通过调用`otherWindow.postMessage()`来向IFrame内的窗口（称为`targetWindow`）发送消息。例如：

   // 假设iframe的src属性指向"child.html"
   var iframe = document.getElementById('myIframe');
   var childWindow = iframe.contentWindow;
   childWindow.postMessage('Hello from parent!', 'http://example.com'); // 指定接收消息的目标域

2. **接收消息**:
在IFrame内部，可以通过监听`window.postMessage`事件来接收来自外部的消息。这通常是通过`addEventListener`实现：

   window.addEventListener('message', function(event) {
     if (event.origin === 'http://example.com') { // 检查消息来源
       console.log('Received message:', event.data);
     }
   }, false);

在这个例子中，只有当消息来源与设置的目标域`http://example.com`匹配时，才会接收到消息。