在vue中嵌入iframe,并实现vue与iframe之间的交互(监听传递过来的消息)

首先通信方式应用的是postMessage:
我们先来介绍一下postMessage,什么是postMessage?
postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.

也就是说postMessage允许跨域;

这也就解决了我们的好多问题;
那么具体到代码是怎么样的呢;

在vue中获取和监听信息

//在vue中嵌入iframe
<iframe ref=” iframe”></iframe>
//先找到iframe的窗口
this.iframeWin = this.$refs.iframe.contentWindow;
//向iframe发送信息,大括号内是发送的内容;
this.iframeWin.postMessage(
     { 

      },"*"
);
//怎样监听iframe传过来的信息
window.addEventListener("message", this.handleMessage);
//获取iframe传过来的信息
handleMessage(event){
  //event为传过来的信息
}

那么在iframe中又是怎么获取和监听内容呢?

//监听信息
window.addEventListener("message",handleMessage);
//传递信息
window.parent.postMessage({ }, '*');