js postmessage

// 父页面代码
// 创建一个 iframe 元素并设置其 src 属性
var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
document.body.appendChild(iframe);

// 监听来自子页面的消息
window.addEventListener('message', function(event) {
    // 检查消息来源，确保只处理来自可信源的消息
    if (event.origin !== 'https://example.com') {
        return;
    }

    // 处理接收到的消息
    console.log('Received message:', event.data);
});

// 向子页面发送消息
function sendMessageToIframe(data) {
    iframe.contentWindow.postMessage(data, 'https://example.com');
}

// 子页面代码
// 监听来自父页面的消息
window.addEventListener('message', function(event) {
    // 检查消息来源，确保只处理来自可信源的消息
    if (event.origin !== 'https://your-parent-page-domain.com') {
        return;
    }

    // 处理接收到的消息
    console.log('Received message from parent:', event.data);

    // 回复父页面
    event.source.postMessage('Message received!', event.origin);
});

解释说明：

1. 父页面代码:

   • 创建一个 iframe 并将其添加到文档中。
   • 使用 window.addEventListener('message', ...) 监听来自子页面的消息。
   • 使用 postMessage 方法向子页面发送消息。

2. 子页面代码:

   • 使用 window.addEventListener('message', ...) 监听来自父页面的消息。
   • 使用 event.source.postMessage(...) 回复父页面。

3. 安全检查:

   • 在接收和发送消息时，始终检查 event.origin 以确保消息来自可信的源，防止跨站脚本攻击（XSS）。