从 iframe 向父级发送响应 - Javascript

在 Web 开发中，经常需要使用 iframe 标签来嵌入其他页面或应用程序。但是，当在 iframe 页面中进行某些操作然后需要通知父级页面时，该怎么做呢？

这就需要使用 JavaScript 提供的 postMessage API 来实现从 iframe 向父级发送响应。

发送响应的步骤

1. 在 iframe 页面中创建一个消息对象并设置发送的数据以及希望接收响应的父级页面的地址：

const message = {
    data: 'Hello, parent page!',
    targetOrigin: 'http://parent-page.com'
};

2. 使用 postMessage API 向父级发送消息对象：

window.parent.postMessage(message, message.targetOrigin);

3. 在父级页面中添加一个事件监听器来接收响应：

window.addEventListener('message', handleMessage);

function handleMessage(event) {
    // 对消息进行验证以确保其来自预期的来源
    if (event.origin !== 'http://iframe-page.com') return;

    // 处理收到的消息及其数据
    console.log(event.data);  // 'Hello, iframe page!'
}

4. 在 iframe 页面中添加一个事件监听器来接收来自父级的响应：

window.addEventListener('message', handleMessage);

function handleMessage(event) {
    // 对消息进行验证以确保其来自预期的来源
    if (event.origin !== 'http://parent-page.com') return;

    // 处理收到的响应及其数据
    console.log(event.data);  // 'Received, parent page!'
}

总结

使用 postMessage API 实现从 iframe 向父级发送响应的过程并不复杂，但需要确保消息及其数据来自预期的来源，避免安全问题。

同时，需要在父级页面中添加相应的事件监听器来处理接收到的消息，以及在 iframe 页面中添加事件监听器以接收来自父级的响应。