通过window.postMessage?API 实现父页面与iframe页面的事件通讯
通过addEventListener监听message,使用window.postMessage实现跨iframe的页面事件通信，子页面通过iframe 引入，代码如下
主页面代码：
<template>
<div><el-button type="primary" @click="handleToIframe">主页面向iframe发送信息</el-button></div>
<iframe ref="fIframe" class="iframeClass" src="http://localhost:8080/iframeCall"></iframe>
</div>
</template>
<script>
mounted() {
// 监听子页面想父页面的传参
window.addEventListener('message', function(event) {
//此处执行事件
console.log('监听子页面向父页面的传参', event.data);
});
},
methods: {
// 父页面处发向子页面传参
handleToIframe() {
let data = {
from: 'parent page',
code: 200,
data: '来自父页面的数据！！！'
};
this.$refs.fIframe.contentWindow.postMessage(data, '*');
}
}
};
</script>
<style scoped>
.iframeClass {
width: 300px;
height: 100px;
border: 1px solid red;
}
</style>
子页面代码示例：
<template>
<div>
<el-button type="success" size="small" @click="sonClick">子页面触发</el-button>
<div>这是通过iframe引的子页面</div>
</div>
</template>
<script>
export default {
mounted() {
// 监听父页面向子页面的传参
window.addEventListener('message', e => {
console.log('父页面传输过来参数', e.data);
});
},
methods: {
// 子页面处发向父页面传参
sonClick() {
let data = {
from: 'iframe child page',
code: 200,
data: '子页面主动触发通讯'
};
window.parent.postMessage(data, '*');
}
}
};
</script>
效果示例：
