简单vue父子iframe页面之间跨域通信传值postMessage()

学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕 ~~，谢谢大家⭐️⭐️⭐️~

1.父向子页面传值

a.vue 父页面 b.vue子页面

    <!--a.vue父页面 -->
    frameLabelStart--frameLabelEnd 

        

          
        
        
        

          

          AI 代码解读
        
      
      

//a.vue 父级给子级发送数据
methods:{
    //data传递的数据
     sendMessage(data) {
     //判断子级的节点存在，$refs取vue节点
          if (this.$refs.mapFrame) {
            let iframeWin = this.$refs.mapFrame.contentWindow;  //获取这个属性
            iframeWin.postMessage(data, "*");   //发送数据
          }
    },
}

//b.vue 子级页面接受数据（和父级监听一样）
mounted(){
    //父页面监听发送过来的消息
    window.addEventListener("message", this.handleMessage);
},
methods:{
    //监听回调
    handleMessage(event){
        const data = event.data; //event.data里就是传过来的数据
    }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.子向父页面传值

//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里就是传过来的数据
    }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕