ue组件内嵌一个iframe，现在想要在iframe内获取父vue组件内信息，采用的是H5新特性PostMessage来解决跨域问题。

postMessage内涵两个API:

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄