vue项目作为父级,内嵌一个iframe
给iframa传值的写法
//html结构
<button @click="fatherpost">给iframe传值</button>
<iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px"
height="500px">
</iframe>
//挂载在mounted中
mounted() {
this.iframeWin = this.$refs.iframe.contentWindow;
}
methods:{
fatherpost(e){ //点击给iframe传值
this.iframeWin.postMessage("我是来自父页面的data", '*')
},
}
//iframe中接受消息,在iframe项目中写监听函数
window.addEventListener('message',function(e){
var Date=e.data;
console.log(Date)
},false);
iframe项目给vue项目的传值
//在iframe项目中添加代码
<button @click="sonpost">向父亲传值</button>
methods: {
sonpost(){
window.parent.postMessage("我是子页面的test!", '*');
}
},
//在vue项目中添加接收代码
window.addEventListener('message', function(e){
var Date=e.data;
console.log(Date)
});
|