iframe 接收消息

iframe接收消息通常是通过父页面与iframe内部页面的通信来实现的。在HTML5中，可以通过postMessage方法实现跨文档消息传递。这个方法允许来自不同源的文档之间进行通信，而不限于同源策略的限制。

在使用postMessage时，一般会按照以下步骤进行：

1. 父页面向iframe发送消息：父页面可以通过iframe元素的contentWindow属性调用postMessage方法向iframe发送消息。

2. iframe处理接收到的消息：iframe页面需要通过监听message事件来接收并处理从父页面发送过来的消息。

3. 校验消息来源：在处理消息之前，通常需要校验消息的来源是否可靠，以保证安全性。

下面是一个简单的示例：

假设父页面的URL为 `http://example.com/parent.html`，它包含了一个iframe，iframe加载的页面是 `http://example.com/child.html`。父页面向iframe发送消息的代码如下：

// 父页面代码
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('这是来自父页面的消息', 'http://example.com');

iframe内部页面接收并处理消息的代码如下：

// iframe内部页面代码
window.addEventListener('message', function(event) {
    // 检查消息来源是否可信
    if (event.origin === 'http://example.com') {
        // 处理消息内容
        console.log('接收到的消息：', event.data);
    }
});