vue與iframe之間的信息交互的實(shí)現(xiàn)
說一下我的使用場(chǎng)景：在vue中使用百度地圖，需要使用離線地圖
先上代碼 然后細(xì)細(xì)品 第一張圖
第二張圖
第三張圖
1.首先iframe 引入你要嵌套的地址 2
.通過vue中給出的ref 來獲取 ifarme的DOM元素
如圖中的 this.iframeWin = this.$refs.iframe.contentWindow 【拿到iframe的window對(duì)象】
3.vue如何向iframe內(nèi)傳送信息 可以通過H5新屬性 postmessage
注釋：【postMessage是有點(diǎn)類似于UDP協(xié)議，就像短信，是異步的，你發(fā)信息過去，但是沒有返回值的，只能內(nèi)部處理完成以后再通過postMessage向外部發(fā)送一個(gè)消息，外部監(jiān)聽message為了讓postMessage像TCP，為了體驗(yàn)像同步的和實(shí)現(xiàn)多通信互不干擾】
具體什么是postmessage :point_right:MDN寫的很詳細(xì)https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
4.通過第二張圖的 cmd來區(qū)別這條message的目的
{
cmd: '命令',
params: {
'鍵1': '值1',
'鍵2': '值2'
}
}
5.第三張圖 就是接收 父頁(yè)面發(fā)來的信息 可以通過 判斷語(yǔ)句寫相應(yīng)的邏輯
6.第一張圖中 不難看出 可以監(jiān)聽到 iframe中的發(fā)來的信息
postmessage
到此這篇關(guān)于vue與iframe之間的信息交互的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue iframe信息交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue獲取參數(shù)的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中下載文件的方法,通過實(shí)例代碼講解了下載后端返回文件和下載本地文件，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-11-11
laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)
今天小編就為大家分享一篇laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個(gè)網(wǎng)頁(yè)特效，幾乎所有的網(wǎng)站或多或少都會(huì)用到這個(gè)特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
Vue+echart?展示后端獲取的數(shù)據(jù)實(shí)現(xiàn)
本文主要介紹了Vue+echart?展示后端獲取的數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這些年寫前端vue時(shí)經(jīng)常碰到虛擬DOM這個(gè)單詞，但都是聽到就算了，左耳進(jìn)右耳出，知道有這么個(gè)東西就完了，因?yàn)楦杏X也沒有影響我實(shí)現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點(diǎn)時(shí)間探討下虛擬DOM相關(guān)的知識(shí)，給自己補(bǔ)補(bǔ)課2022-10-10
這篇文章主要介紹了vue 自定義icon的圖標(biāo)的步驟，文中大概給大家分為兩步驟，通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
IE11下處理Promise及Vue的單項(xiàng)數(shù)據(jù)流問題
最近我開發(fā)的公司的競(jìng)賽網(wǎng)站被發(fā)現(xiàn)在IE11下排行榜無數(shù)據(jù)，但是在其他瀏覽器沒問題，我然后打開控制臺(tái)一看，發(fā)現(xiàn)有問題，糾結(jié)了半天才搗騰好，下面小編把方案分享處理，供大家選擇2019-07-07
循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語(yǔ)法,sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名,下面這篇文章主要給大家介紹了關(guān)于Vue中v-for列表循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-11-11
從零擼一個(gè)pc端vue的ui組件庫(kù)( 計(jì)數(shù)器組件 )
這篇文章主要介紹了pc端vue的ui組件庫(kù)的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08