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获取传过来的数据
});