在一個項目的頁面中使用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:' 我是子頁面傳給父頁面的數據 '} }，‘*’)
}