vue与iframe双向通信

iframe通信

父vue

<iframe id="myiframe" ref="myiframe" src="./child.html" width="100%" height="400px"></iframe>

//获取子iframe三种方法
   let iframeWin = this.$refs.myiframe.contentWindow;
   //let iframeWin = document.getElementById("myiframe").contentWindow;
  //let iframeWin = window.frames["myiframe"];


//父向子传
let msg=''
iframeWin.postMessage(msg,"*");
//父监听子
window.addEventListener("message", event => {
console.log('子向父传来的数据',event.data)
})

子iframe

//子接收父，监听message事件，采用冒泡传递方式
    window.addEventListener("message",receiveMessage,false);
    function receiveMessage(event){
        let data = event.data
        console.log('我是父页面传递过来的', data)
    }
//子向父传
function sendMessage(){
        let data = 'Hello from child!'
        window.parent.postMessage(data, "*")
    }