VUE組件如何與iframe通訊問題

ue組件內嵌一個iframe，如今想要在iframe內獲取父vue組件內信息，採用的是H5新特性PostMessage來解決跨域問題。

postMessage內涵兩個API:

onMessage：消息監聽

postMessage：消息發送

舉個栗子，好比我要改變iframe內字體變成跟父級同樣，直接上代碼：

父

 <div class="mapbox">
      <iframe name="map" src="http://localhost:8083/setposition.html?add='add'"></iframe>
 </div>

clearMap(){
      let map = document.getElementsByName("map")[0].contentWindow
      map.postMessage("clearMap","*")
    }

iframe內：

window.addEventListener('message', function (evt) {
  
    if (evt.data == 'clearMap'){
        clearMap()
    }
    //event.data獲取傳過來的數據
});