js同级弹窗实现数据传输修改

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>