vue與iframe之間的交互方式(一看就會)
vue與iframe之間的交互
首先介紹一下使用背景，前端采用html單頁面引用vue的方式（逼不得已這么做，否則直接用vue不香嘛），廢話不多說
頁面大致是這樣，現(xiàn)在需要做的是在iframe頁面里面觸發(fā)事件跳轉(zhuǎn)頁面，并且使父級vue頁面的左側(cè)菜單選中相應(yīng)頁面的菜單，當(dāng)然iframe子頁面也是vue，但是其他頁面也不影響
子頁面向父頁面?zhèn)髦?/h3>
1.在iframe頁面里觸發(fā)事件，找到他的父級頁面的dom元素，用postMessage傳值，里面所有的都是參數(shù)，cmd是為了能在父級vue頁面區(qū)分該操作的用途
2.在父級vue頁面的周期函數(shù)mounted中監(jiān)聽iframe中發(fā)來的消息，傳來的參數(shù)就在event.data里面。（loadHtmlFrag()則是在父級vue頁面methods中的方法）
父頁面向子頁面?zhèn)髦?/h3>
會了子頁面向父業(yè)面?zhèn)髦?，那父頁面向子頁面?zhèn)髦狄簿蜁耍褪前梢欢襟E調(diào)換未知
1.在父頁面中觸發(fā)事件傳遞參數(shù)，在父頁面通過ref來得到iframe子頁面的dom元素，然手使用postMessage傳參。
另：通過ref獲取dom，父頁面的iframe標(biāo)簽里寫ref就行
2.和上面一樣，在子頁面的周期函數(shù)mounted中監(jiān)聽父頁面發(fā)來的消息
vue與html之間iframe交互
1.父級調(diào)用子級ifram中的方法
document.getElementById(“id”).contentWindow.func()
id為iframe的id，func為引入iframe中的方法
2.子級iframe（html 或者vue）調(diào)用父級html中的方法
window.parent.func()
func為父級html的方法
3.vue中調(diào)用子級iframe html 中的方法
this.$refs.iframe.contentWindow.func()
4.在iframe中調(diào)用vue中的方法
先把vue中的方法暴露到window對象上
created(){
let _this = this
? ? ? ? window.funcname = ()=>{
? ? ? ? //vue中的方法
? ? ? ? ? ? ? _this.func() ? ? ?
? ? ? ? }
? ? } ? ?在iframe中調(diào)用
window.parent.funcname()
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要通過源碼分析介紹了Vue.js的監(jiān)聽實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
從 vue2 升級到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項式API。這篇文章主要介紹了vue3 setup() 高級用法,需要的朋友可以參考下2021-11-11
Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue 中常見的時間格式轉(zhuǎn)換,需要的朋友可以參考下2022-05-05
vue2+tracking實現(xiàn)PC端的人臉識別示例
本文主要介紹了vue2+tracking實現(xiàn)PC端的人臉識別示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分割驗證碼效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+elementPlus?table中添加輸入框并提交校驗
這篇文章主要介紹了vue3+elementPlus?table里添加輸入框并提交校驗,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue使用正則校驗文本框為正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue使用recorder.js實現(xiàn)錄音功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11