从 iframe 向父级发送响应

当我们在网站中嵌入了一个iframe时，可能需要在iframe中进行某些操作后将结果传递回父级页面。这个过程可以通过PostMessage API来实现。本文将介绍如何在iframe中使用PostMessage API向父级页面发送响应。

PostMessage API

PostMessage API是HTML5提供的一个API，它允许在不同的窗口间传递信息。具体地说，通过PostMessage API可以向其他的窗口发送一个消息，并且可以接收其他窗口发送的消息。使用PostMessage API需要先获取需要发送消息的窗口对象，并使用窗口对象的postMessage方法向其发送消息。以下是一个使用PostMessage API向父级页面发送消息的简单例子：

// 在iframe中向父级页面发送消息
window.parent.postMessage('hello', 'http://www.example.com');

在这个例子中，我们调用了iframe窗口对象的parent属性来获取父级窗口对象，并使用其postMessage方法向其发送了一条信息。这里第二个参数是接收消息的窗口的源URL，如果指定了源URL，则只有该URL与发送消息的窗口匹配时，才会接收到消息。如果省略了源URL参数，则任何窗口都可以接收到消息。

向父级页面发送响应

在iframe中向父级页面发送响应也是通过PostMessage API来实现。我们需要在iframe窗口中监听message事件，当接收到来自父级页面的消息时，我们可以根据消息内容进行相应的处理，并向父级页面发送响应。

以下是一个示例：

// 监听message事件
window.addEventListener('message', function(event) {
  // 判断消息是否来自父级页面
  if (event.source === parent) {
    var message = event.data;
    if (message.type === 'get-user') {
      // 获取用户信息并向父级页面发送响应
      var user = {
        name: 'Alice',
        age: 28
      };
      parent.postMessage({ type: 'user-info', data: user }, '*');
    }
  }
});

在这个例子中，我们首先在iframe窗口中监听了message事件，当接收到来自父级页面的消息时，我们根据消息内容进行相应的处理。在这里，我们可以看到我们希望从父级页面中获取用户信息，于是我们向父级页面发送了一条消息。在消息中，我们通过type字段来表示消息的类型，data字段用来传递具体的数据。在这个例子中，我们传递了一个用户信息的对象。

总结

使用PostMessage API可以在iframe窗口和父级页面之间进行消息传递。我们可以在iframe窗口中监听message事件，当接收到来自父级页面的消息时，我们可以根据消息内容进行相应的处理，并向父级页面发送响应。在实际的开发中，我们可以使用PostMessage API来实现跨域通信、跨窗口通信、相同页面不同iframe之间的通信等功能。