iframe（子页面）
//public/static/index.html
<body>
<div class="close-btn" id="close-btn">关闭</div>
<div class="success-btn" id="success-btn">成功</div>
</body>
<script>
$("#close-btn").click(() => {
window.parent.postMessage('close', '*');//向父页面传参
});
$("#success-btn").click(() => {
window.parent.postMessage('success', '*');//向父页面传参
});
window.addEventListener('message', (e) => {////监听父页面传递的参数
console.log('父页面传输过来参数'，e.data)
});
</script>
vue（父页面）
//index.vue
<template>
<el-dialog
title=""
:visible.sync="dialogVisible"
:close-on-click-modal="false"
custom-class="dialogCssDiv"
:show-close="false"
:modal-append-to-body="false"
class="dialogCss"
>
<iframe
ref="iframeRef"
:src="iframeSrc"
width="300px"
height="500px"
scrolling="no"
frameborder="0"
></iframe>
<el-button
type="primary"
size="small"
@click.native.prevent="submitBtn"
>向子页面传参</el-button
>
</el-dialog>
</template>
<script>
export default {
data(){
return {
dialogVisible:'false',
iframeSrc:'在线地址或本地地址',
//本地html文件需要放在public文件夹中,如文件位于public/static/index.html，则本地地址应填写为./static.index.html
}
}，
created() {
this.$nextTick(() => {
window.addEventListener('message', this.messageEvent)//监听子页面传递的参数
})
},
destroyed(){
window.removeEventListener('message',this.messageEvent)
},
methods:{
messageEvent(messageEvent){
let data = messageEvent.data;//data为传过来的数据
if(data == 'close'){
this.dialogVisible = false;
}else if(data == 'success'){
setTimeout(()=>{
this.dialogVisible = false;
},1000)
}
},
submitBtn(){
this.$refs.iframeRef.contentWindow.postMessage('data','*')//向子页面传参
}
}
}
</script>
网友评论