vue iframe 数据交互
时间: 2023-09-05 07:15:03 浏览: 53
在Vue中,可以通过使用iframe元素来实现与iframe中的内容进行数据交互。首先,在父页面中,可以通过ref属性引用iframe元素,并在mounted生命周期函数中监听iframe的加载完成事件。在加载完成事件中,可以通过postMessage方法向iframe发送消息,同时传递数据。例如,在父页面的mounted函数中可以添加以下代码:
mounted() {
let mapFrame = this.$refs.iframe;
if (mapFrame.attachEvent) {
mapFrame.attachEvent("onload", function() {
let iframeWin = mapFrame.contentWindow;
iframeWin.postMessage({ method: 'getBaseInfo', data: '我是vuex state的数据' }, '*');
});
} else {
mapFrame.onload = function() {
let iframeWin = mapFrame.contentWindow;
iframeWin.postMessage({ method: 'getBaseInfo', data: '我是vuex state的数据' }, '*');
};
}
}
接下来,在iframe中,可以通过window对象的addEventListener方法来监听message事件,从而接收来自父页面的消息。在message事件的回调函数中,可以通过event.data获取到传递过来的数据。例如,在iframe中可以添加以下代码:
window.addEventListener('message', function(e) {
console.log('e', e.data); // 数据保存在data中
});
通过上述代码,可以实现在Vue中使用iframe进行数据交互。父页面通过postMessage方法向iframe发送消息,iframe通过message事件接收来自父页面的消息,并进行相应的处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [前端vue项目和iframe项目之间的数据交互](https://blog.csdn.net/qq_42761482/article/details/123177188)[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%"]
- *3* [vue与iframe之间的交互,一看就会!](https://blog.csdn.net/deciduous_leaves/article/details/109768113)[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 ]