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