vue.js Vue 中iframe引用html页面之实现页面交互

iframe嵌入html核心代码：

1.从父页面发送数据到子页面

//父页面

let iframeWin = this.$refs.iframeDom.contentWindow;

let data = '';//data需要传给子页面的数据

iframeWin.postMessage(data,"*")//发送给子页面

//子页面接收

window.addEventListener('message', function(event) {

//业务逻辑处理

//、、、、、、

}, false);

2.子页面发送数据到父页面

//子页面发送数据到父页面

let data = '';//data需要传给父页面的数据

window.parent.postMessage(data, '*')

//父页面接收

mounted(){

window.addEventListener('message', this.handleMessage)

},

methods:{

//接收方法

handleMessage(event){

//业务逻辑处理

}

}

相关文章

 您阅读本篇文章共花了：