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