项目中有个地图是通过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); 
    

}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐