【HTML】window.postMessage详解

window.postMessage 是一个允许跨源通信的安全方式。它可以让运行在一个window对象的文档（文档可以不同源），安全地向另一个window对象的文档发送数据。这种方式可以用于解决跨域问题。

解决方案：

1. 在父窗口中调用子窗口的window对象的postMessage方法，向子窗口发送消息。
2. 在子窗口中，通过监听message事件来接收消息。

实例代码：

父窗口发送消息：

// 假设iframe是一个已经加载的子窗口
var iframeWindow = document.getElementById('myIframe').contentWindow;
iframeWindow.postMessage('Hello, world!', 'http://example.com');

子窗口接收消息：

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://parent.example.com') return;
 
  console.log(event.data); // 输出：Hello, world!
}, false);

注意：

• 为了安全性，postMessage方法会检查发送消息的窗口是否位于同一个域中，如果不是，则会检查消息发送时提供的origin参数。只有当两者匹配时，消息才会被接收。
• 为了避免数据被未知的或者恶意的脚本利用，应该始终提供一个有效的origin参数，并在事件监听器中检查event.origin。