一个页面中两个iframe页面中方法的互相调用

### 不同源的 iframe 间的安全通信 为了实现不同源的 iframe 安全通信，`postMessage()` 方法提供了一种有效的方式。此方法允许一个窗口向另一个窗口发送消息，即使这两个窗口位于不同的源下也能正常工作[^3]。 当调用 `postMessage()` 发送信息时，会在目标窗口上触发 `message` 事件。接收方可以通过监听该事件来获取并处理传入的数据。需要注意的是，尽管两个页面无法直接访问彼此的方法或属性，但它们能够通过这种方式交换信息而不违反同源策略的要求[^4]。 下面展示了一个简单的例子说明如何利用 JavaScript 实现跨域 iframe 的双向通讯： #### 父页面代码 ```javascript // 创建子iframe const childFrame = document.createElement('iframe'); childFrame.src = 'https://example.com/child.html'; document.body.appendChild(childFrame); // 接收来自子iframe的消息 window.addEventListener('message', function(event) { console.log(`收到消息: ${event.data}`); }); // 给子iframe发消息 function sendMessageToChild(message){ childFrame.contentWindow.postMessage(message, '*'); // '*'表示不限制目标源 } ``` #### 子iframe中的JavaScript代码 ```javascript // 监听父级传来的内容 window.addEventListener('message', function(event) { console.log(`接收到的信息为：${event.data}`); // 只回应特定来源的消息 if (event.origin !== 'http://parent-domain.com') return; // 返回给父页面一些反馈 event.source.postMessage('已成功接收到您的消息!', event.origin); }); ``` 这种方法不仅解决了跨域问题，还提供了良好的安全性保障机制，比如可以设置白名单验证消息来源的有效性和合法性，从而防止潜在的安全威胁。