window.postMessage 是一种用于实现跨窗口通信的 HTML5 特性。它允许在不同窗口或 iframe 之间安全地传递数据，即使这些窗口来自不同的域名。
window.postMessage 方法接受两个参数：
message：要发送的消息，可以是一个字符串或一个对象。
targetOrigin：指定接收消息的窗口的源（origin）。通常为目标窗口的域名，也可以是通配符，如 *，表示可以接收来自任何源的消息。
发送消息的窗口可以是任何 DOM 元素，如窗口、iframe 或弹窗。接收消息的窗口需要通过监听 message 事件来处理收到的消息。
以下是一个示例，演示如何使用 window.postMessage 在父级页面和子页面之间进行跨窗口通信：
在父级页面中：
// 监听message事件
window.addEventListener('message', function(event) {
// 确保消息来自可信任的源
if (event.origin !== 'https://child-page.com') {
return;
}
// 处理接收到的消息
console.log('父级页面收到消息：', event.data);
});
// 向子页面发送消息
var childWindow = document.getElementById('child-iframe').contentWindow;
childWindow.postMessage('Hello from parent!', 'https://child-page.com');
在子页面中（iframe 页面）：
// 监听message事件
window.addEventListener('message', function(event) {
// 确保消息来自可信任的源
if (event.origin !== 'https://parent-page.com') {
return;
}
// 处理接收到的消息
console.log('子页面收到消息：', event.data);
// 向父级页面回复消息
event.source.postMessage('Hello from child!', 'https://parent-page.com');
});
在这个示例中，父级页面和子页面都通过监听 message 事件来接收消息，并使用 event.data 来访问消息内容。父级页面向子页面发送消息，子页面接收后回复了一条消息。
注意：在实际应用中，要确保安全性，你应该验证消息的来源（event.origin）以防止不受信任的源发送恶意消息。
在子页面中，你可以在不使用 window.addEventListener 的情况下向父页面发送消息，而是使用直接的 JavaScript 语句。以下是一个示例：
在子页面中 (child_page.html)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<!-- 子页面内容 -->
<script>
// 向父页面发送消息
window.parent.postMessage('Hello from child!', 'https://parent-page.com');
</script>
</body>
</html>
在这个示例中，子页面中的 JavaScript 代码直接在加载页面时就向父页面发送消息，而不需要在 window.addEventListener 中编写代码。
这种方式适用于一些简单的场景，其中子页面加载后立即需要向父页面发送消息。如果需要更复杂的消息传递或需要在特定事件发生时发送消息，那么使用 window.addEventListener 来监听消息事件可能更合适。
