【vue和iframe】vue和iframe之间如何相互通信

项目中有个地图是通过iframe嵌入vue项目中的，vue组件和iframe之间的通信就需要通过window.parent和contentwindow.

1、iframe向vue组件传递数据

在iframe中请求了数据，需要传递给vue组件

// iframe中请求数据

request(get,tower/core/power/light/data/now,parameters).then(res => {
      if (res.data.code == 0) {
      var res1 = res.data.data;
      var res2 = results;
      res2.push(res1);

      // 请求完成之后传递给vue组件  
      window.parent.postMessage(res2);
    }
})

在vue组件中如何接收？

// vue组件中接收数据

mounted () {
    window.addEventListener("message", e => {
        

        //监听message 收到数据e.data;
        console.log( 传递过来的数据, e.data);
        
    })
}

2、vue组件中获取iframe的内容

// iframe
<iframe
 id="parkIframe"
 style="width: 100%; height: 100%"
 src="index.html"
 frameborder="0"
></iframe>


// vue组件中
mounted () {

    // 通过iframe的id获取iframe
    let iframeObj = document.getElementById(parkIframe);
    
    // 通过contentwindow获取iframe内的值
    console.log(获取iframe内的数据, iframeObj.contentWindow); 
    

}