父级向iframe内部发送消息
// 获取iframe的引用
const mapFrame = this.$refs.iframeref;
// 处理浏览器兼容性
if (mapFrame.attachEvent) {
// IE浏览器中使用attachEvent
mapFrame.attachEvent('onload', function() {
// 获取iframe内部的window对象
const iframeWin = mapFrame.contentWindow;
// 使用postMessage向iframe发送数据
iframeWin.postMessage(data, '*');
});
} else {
// 其他浏览器使用onload事件
mapFrame.onload = function() {
const iframeWin = mapFrame.contentWindow;
iframeWin.postMessage(data, '*');
}
}
iframe内部接收消息
// iframe内部监听message事件,从父级接收数据
window.addEventListener('message', (event) => {
// 获取从父级发送来的数据
let form = event.data;
// 对接收到的数据进行处理
checkform(form);
}, false);
iframe内部向父级发送消息
// iframe内部使用postMessage向父级发送数据
window.parent.postMessage({
abc: '123456',
}, '*');
父级接收iframe内部发送的消息
// 父级监听message事件,接收iframe内部发送的数据
window.addEventListener('message', (event) => {
// 打印接收到的数据
console.log(event.data);
}, false);