vue中iframe结合window.postMessage实现父子页面间的通信

在一个项目的页面中使用iframe嵌入另一个项目的页面，需要实现父子，子父页面的通信

一、语法

         otherWindow.postMessage( message , targetOrigin )

1. otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
2. message 将要发送到其他window的数据。
3. targetOrigin 是限定消息接收范围(域名设置)，不限制使用 '*’。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送，只有三者完全匹配，消息才会被发送。

二、传值

1.父页面 向 子页面 传值

　　// 父页面代码

　　sendMessage(){

　　　　this.$refs.iframe.contentWindow.postMessage(' 我是父页面传给子页面的数据 ' ，‘*’)；

　　　　// this.$refs.iframe.contentWindow.postMessage({ data:{code:'success',test:' 我是父页面传给子页面的数据 '} }，‘*’)

　　}

　　// 子页面代码 

　　methods:{

　　　　handleMessage(event){

　　　　　　const data = event.data.data;

　　　　　　if(data.code == 'success'){

　　　　　　　　console.log(data.test);

　　　　　　}

　　　　}

　　},

　　mounted(){

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

　　}

2.子页面 向 父页面 传值

　　// 父页面代码

　　methods:{

　　　　handleMessage(event){

　　　　　　const data = event.data.data;

　　　　　　if(data.code == 'success'){

　　　　　　　　console.log(data.test);

　　　　　　}

　　　　}

　　},

　　mounted(){

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

　　}

       // 子页面代码

　　submit(){

　　　　this.$refs.iframe.contentWindow.postMessage({ data:{code:'success',test:' 我是子页面传给父页面的数据 '} }，‘*’)

　　}