简单vue父子iframe页面跨域通信传值postMessage()
vue不同域名父子iframe间相互传值1.子页面向父页面传值2.父页面向子页面传值1.子页面向父页面传值a.vue 父页面b.vue子页面//b.vue 子级给父级发送数据methods:{sendMessage(){window.parent.postMessage(data, "*");//data传递的数据,“*”跨域的域名*代表所有}}//a.vue 父级页面接受数据mounted(){
·
vue不同域名父子iframe间相互传值
1.子页面向父页面传值
a.vue 父页面 b.vue子页面
//b.vue 子级给父级发送数据
methods:{
sendMessage(){
window.parent.postMessage(data, "*"); //data传递的数据,“*”跨域的域名 *代表所有
}
}
//a.vue 父级页面接受数据
mounted(){
//父页面监听发送过来的消息
window.addEventListener("message", this.handleMessage);
},
methods:{
//监听回调
handleMessage(event){
const data = event.data; //event.data里就是传过来的数据
}
}
2.父页面向子页面传值
a.vue 父页面 b.vue子页面
//a.vue 父级给子级发送数据
methods:{
//data传递的数据
sendMessage(data) {
//判断子级的节点存在,$refs取vue节点
if (this.$refs.xxx) {
let iframeWin = this.$refs.xxx.contentWindow; //获取这个属性
iframeWin.postMessage(data, "*"); //发送数据
}
},
}
//b.vue 子级页面接受数据(和父级监听一样)
mounted(){
//父页面监听发送过来的消息
window.addEventListener("message", this.handleMessage);
},
methods:{
//监听回调
handleMessage(event){
const data = event.data; //event.data里就是传过来的数据
}
}
总结:父级和子级的监听都是一样的,区别在于发送数据时,子级可以直接调用window.parent拿到父级页面;父级通过拿到iframe页面的dom。都是使用postMessage()方法发送数据。
更多推荐
已为社区贡献8条内容
所有评论(0)