iframe 数据交互
时间: 2023-10-20 10:31:55 浏览: 43
iframe数据交互是指在父页面和iframe页面之间进行信息传递和交流的过程。通常情况下,为了实现跨源通信,需要使用window对象的postMessage方法来发送和接收消息。
在父页面中,可以通过以下方式发送消息给iframe页面:
```
window.frames['iframe名字'].postMessage(data, targetOrigin);
```
其中,data是要发送的数据,targetOrigin是目标iframe页面的URL。
在iframe页面中,可以通过监听message事件来接收来自父页面的消息:
```
window.addEventListener('message', function(event) {
// 处理接收到的消息
}, false);
```
接收到的消息包含在event对象的data属性中,可以使用event.data来获取。
通过这种方式,父页面和iframe页面可以进行双向的数据交互,实现信息的传递和共享。引用<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [iframe父子页面间数据交互](https://blog.csdn.net/weixin_44545318/article/details/109642913)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue与iframe之间的信息交互的实现](https://download.csdn.net/download/weixin_38508126/12926863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]