vue页面和ifram之间传值信息交互

方式一：

vue页面

mounted(){ window['reData'] = () => { //监听iframe页面调用本vue页面的方法并执行 this.reData(); }; const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象 this.framObj = obj1 this.getWaterDate() }, methods:{ getWaterDate(){ //第一次给iframe页面变量赋值 let data = { damAreaTemperature: "47.5", } this.framObj.waterTopData = data }, reData(){ //iframe页面调用vue函数再次给iframe页面变量重新赋值 let data = { damAreaTemperature: "47.5", } this.framObj.waterTopData = data } }

iframe页面

setWaterTopData() //第一次获取vue页面给本页面设置的值并渲染页面 function setWaterTopData(){ if(waterTopData){ let top_tem = $('#top_tem') top_tem.html(waterTopData.damAreaTemperature) } } setTimeout(()=>{ //调用vue页面函数更新本页面变量值并渲染页面 window.parent.reData(); setWaterTopData() },5000)

方式二：H5新属性 postmessage

vue页面

mounted(){ const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象 this.framObj = obj1 window.addEventListener('message', event =>{ //监听iframe页面传过来的消息并执行方法 let data = event.data switch (data.cmd) { case 'getWaterDate' : this.getWaterDate() break } }) }, methods:{ getWaterDate(){ //此方法 发送消息并传参给iframe页面 this.framObj.postMessage({ cmd : 'updateWaterData', params : { damAreaTemperature: "47.5", } }, 'http://localhost:8088/') }, }

iframe页面

setTimeout(()=>{ //向vue页面发送消息 window.parent.postMessage({ cmd : 'getWaterDate', }, 'http://localhost:8088/' ) },5000) function setWaterTopData(data){ let top_tem = $('#top_tem') top_tem.html(data.damAreaTemperature) } //监听vue页面发来的消息并执行相应的函数 window.addEventListener('message', event =>{ let data = event.data switch (data.cmd) { case 'updateWaterData' : setWaterTopData(data.params) break } })