vue中iframe结合window.postMessage实现父子页面间的通信
在一个项目的页面中使用iframe嵌入另一个项目的页面，需要实现父子，子父页面的通信
一、语法
otherWindow.postMessage( message , targetOrigin )
- otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
- message 将要发送到其他window的数据。
- 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:' 我是子页面传给父页面的数据 '} }，‘*’)
}
