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:' 我是子頁面傳給父頁面的資料 '}}，‘*’)
}