您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue組件和iframe頁(yè)面的相互傳參問(wèn)題怎么解決”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“vue組件和iframe頁(yè)面的相互傳參問(wèn)題怎么解決”文章能幫助大家解決問(wèn)題。
目前網(wǎng)上大多關(guān)于iframe父子傳參的博客都是在敘述父頁(yè)面是html文件,子iframe文件也是html文件,涉及到父頁(yè)面是vue組件子iframe頁(yè)面是html的博客多數(shù)講的不是很明白;
而最近我在項(xiàng)目中碰到了這種需求:在vue組件中嵌入iframe頁(yè)面,并實(shí)現(xiàn)父子傳參;
下面是在 vue組件中(父組件) 一個(gè)通過(guò)點(diǎn)擊按鈕觸發(fā)的方法:
sentToIframe() { let childFrameObj = document.getElementById("unityiframe"); console.log("childFrameObj", childFrameObj); // childFrameObj.contentWindow.getMessageFromParent(this.tData); //第一種向子iFrame傳參方式,調(diào)用iframe的methods達(dá)到傳參的目的 this.$refs.unity.contentWindow.getMessageFromParent(this.tData); // 這樣也是可以調(diào)用子iframe的方法 // childFrameObj.contentWindow.frameData = "這是vue組件給你的參數(shù)!" // 傳參成功 this.$refs.unity.contentWindow.frameData = "這是vue組件給你的第二個(gè)參數(shù)!"; //傳參成功 console.log("發(fā)送完成"); //此外,還可以通過(guò)DOM操作,操作子iframe的DOM var t = document .getElementById("unityiframe") .contentWindow.document.getElementById("dd"); console.log(t); // console.log("frameData?", unityiframe.window.frameData); //利用id可以調(diào)用到iframe里的變量 // console.log("frameData?",this.$refs.unity.window.frameData) //利用ref調(diào)用不到iframe里的變量 },
子組件 iframe頁(yè)面 中有一個(gè)被調(diào)用的方法及變量:
var frameData = "別喊我!" //此變量用于測(cè)試 vue組件是否能調(diào)用此變量 function getMessageFromParent(value){ // 接受從vue組件中傳過(guò)來(lái)的參數(shù) console.log(`我接收到parent傳過(guò)來(lái)的參數(shù)了:${value}`) }
點(diǎn)擊按鈕的結(jié)果是:
在vue組件中有一個(gè)供iframe頁(yè)面調(diào)用的方法:
getFromIframe(value) { console.log(`我是iframe傳過(guò)來(lái)的參數(shù):${value}`); console.log("我被iframe調(diào)用了!"); console.log(this.vueData); console.log(`改變前是:你是否能夠改變我;改變后是:${this.isChangeMe}`); }
iframe調(diào)用vue組件方法的代碼:
function Obj(res){ // Obj通過(guò)按鈕點(diǎn)擊觸發(fā) console.log(parent) // 調(diào)用vue組件方法 parent.getFromIframe("我叫iframe") // 向vue組件發(fā)送參數(shù) && 改變vue組件的參數(shù) parent.isChangeMe = "你已經(jīng)被我iframe改變了" }
但是 ?。。。。。。。。。。。。。?!
只這么做是不夠的,會(huì)報(bào)錯(cuò),如下:
個(gè)人猜想: 問(wèn)題的原因是 iframe的parent并不是vue實(shí)例!
目前只找到了一個(gè)辦法來(lái)解決這個(gè)問(wèn)題:
就是在created鉤子里加上這兩句,
created() { window.getFromIframe = this.getFromIframe; //把vue實(shí)例中的方法引用給window對(duì)象 },
在調(diào)用的vue實(shí)例的方法中 加上對(duì)vue內(nèi)變量的改變
getFromIframe(value) { console.log(`我是iframe傳過(guò)來(lái)的參數(shù):${value}`); console.log("我被iframe調(diào)用了!"); console.log(this.vueData); this.isChangeMe = window.isChangeMe;// 把window變量 賦值給 vue 實(shí)例變量;使得在iframe中能夠改變vue實(shí)例中變量 console.log(`改變前是:你是否能夠改變我;改變后是:${this.isChangeMe}`); }
最終的運(yùn)行結(jié)果是:
bingo!?。。?! 問(wèn)題暫時(shí)得到了解決。
小結(jié)一下:vue組件 和 iframe 的嵌入麻煩多多,且目前還沒(méi)還沒(méi)找到正統(tǒng)的方法;此外,還有很多坑我還沒(méi)踩到,如果后續(xù)這方面有什么問(wèn)題 以及 其他的解決方案,我會(huì)繼續(xù)更新到這上面來(lái)的!
需求是把兩個(gè)單獨(dú)的系統(tǒng)在一個(gè)總的系統(tǒng)作為菜單進(jìn)行免密登錄,由于時(shí)間還有跨域和不同的token等問(wèn)題,就使用了內(nèi)嵌iframe,因?yàn)槭遣煌挠蛎M(jìn)入子系統(tǒng)也要本地存儲(chǔ)一下(獲取的user信息以及token傳入到iframe子系統(tǒng))
<template> <div class="hello"> <div> <iframe src="http://xxxxxxxxxxxxxx" frameborder="0" id="myIframe" ref="myIframe"></iframe> </div> </div> </template>
export default { mounted() { this.iframeWin = this.$refs.myIframe.contentWindow; //最開始做的是點(diǎn)擊事件是沒(méi)有問(wèn)題的 后面需要自動(dòng)傳值就不行 也試了模擬點(diǎn)擊還是不行 //原因是iframe還沒(méi)加載完 所以使用onload document.getElementById("myIframe").onload=function(){ this.fatherpost() }; } methods:{ fatherpost(e){//iframe傳值 this.iframeWin.postMessage({ params:{ data:data//傳的數(shù)據(jù) } },'http://xxxxxxxxxxxxxx') }, } } //iframe接收 export default { mounted() { window.addEventListener('message',function(e){ console.log(e.data) },false) } } //子傳父的話 掛載和接收的方式都是差不多 window.parent.postMessage(message, targetOrigin, [transfer])
關(guān)于“vue組件和iframe頁(yè)面的相互傳參問(wèn)題怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。