vue與iframe之間的信息交互的實現(xiàn)
說一下我的使用場景：在vue中使用百度地圖，需要使用離線地圖
先上代碼 然后細細品 第一張圖
第二張圖
第三張圖
1.首先iframe 引入你要嵌套的地址 2
.通過vue中給出的ref 來獲取 ifarme的DOM元素
如圖中的 this.iframeWin = this.$refs.iframe.contentWindow 【拿到iframe的window對象】
3.vue如何向iframe內(nèi)傳送信息 可以通過H5新屬性 postmessage
注釋：【postMessage是有點類似于UDP協(xié)議，就像短信，是異步的，你發(fā)信息過去，但是沒有返回值的，只能內(nèi)部處理完成以后再通過postMessage向外部發(fā)送一個消息，外部監(jiān)聽message為了讓postMessage像TCP，為了體驗像同步的和實現(xiàn)多通信互不干擾】
具體什么是postmessage :point_right:MDN寫的很詳細https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
4.通過第二張圖的 cmd來區(qū)別這條message的目的
{
cmd: '命令',
params: {
'鍵1': '值1',
'鍵2': '值2'
}
}
5.第三張圖 就是接收 父頁面發(fā)來的信息 可以通過 判斷語句寫相應(yīng)的邏輯
6.第一張圖中 不難看出 可以監(jiān)聽到 iframe中的發(fā)來的信息
postmessage
到此這篇關(guān)于vue與iframe之間的信息交互的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue iframe信息交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了用Vue.js遞歸組件構(gòu)建一個可折疊的樹形菜單的教學(xué)內(nèi)容，有興趣的朋友跟著學(xué)習(xí)下。2017-12-12
vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實例
這篇文章主要介紹了vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了.netcore+vue 實現(xiàn)壓縮文件下載功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue3項目如何使用prettier格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中使用crypto-js AES對稱加密算法實現(xiàn)加密解密
?在數(shù)字加密算法中，通過可劃分為對稱加密和非對稱加密，本文主要介紹了Vue中使用crypto-js AES對稱加密算法實現(xiàn)加密解密，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
今天小編就為大家分享一篇vue v-for直接循環(huán)數(shù)字實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于vue.js整合vux中上拉加載下拉刷新的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了vue 中使用print.js導(dǎo)出pdf操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文通過實例代碼給大家介紹了vue仿百度搜索功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-02-02
這篇文章主要介紹了fetch網(wǎng)絡(luò)請求封裝的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2021-11-11