Vue iframe父子通信

1. vue 组件嵌入iframe

<!-- vue template-->
<div>
  <iframe src="http://localhost:8081/" ref="iframe" frameborder="0"></iframe>
</div>

mounted() {
  window.addEventListener("message", (e:  any) => {
      const data = e.data;
      console.log(data);  // 输出iframe 消息
      const child = (this.$refs['iframe'] as any);
      child.contentWindow.postMessage('success', '*')  // '*'参数表示没有跨域限制
    }, false);
}

2. iframe里的vue页面发送消息与接收消息

mounted() {
	// 发送消息
    window.parent.postMessage({
      str: 'hello'
    }, '*'); // '*'参数表示没有跨域限制
    // 接受消息
    window.addEventListener('message', (event: any) => {
      console.log(event.data)
    })
 }