vue 給嵌套的iframe子頁面傳數據 postMessage

Vue組件下嵌套了一個不一樣域下的子頁面，iframe子頁面不能直接獲取到父頁面的數據，即便數據存在localStorage中，子頁面同樣是獲取不到的，因此只好使用postMessage傳數據：

<iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe>

父頁面發送數據參數：
<script>
    export default {
        mounted() {
            let mapFrame = this.$refs['mapFrame']
            if (mapFrame.attachEvent){  //兼容瀏覽器判斷
                mapFrame.attachEvent("onload", function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage(data,'*')
              //data傳遞的參數   *寫成子頁面的域名或者是ip
                })
            } else { 
                mapFrame.onload = function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage(data,'*')
                } 
            }
            
        }
    }
</script>
                    

子頁面接收參數：

<script>
  export default{
    mounted(){
      window.addEventListener('message',function(e){               
            console.log(e.origin,e.data)//子頁面接收參數
        })  
     }

}
    
</script>