vue项目中与内嵌iframe传值
vue项目作为父级,内嵌一个iframe给iframa传值的写法//html结构<button @click="fatherpost">积分是开发的</button><iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px"height="500px"><
·
温馨提示:传的值最好不要是复杂数据类型,如果穿复杂数据类型的话 ,会有延迟,很慢
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)
});
更多推荐
已为社区贡献7条内容
所有评论(0)