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

简介: 简单vue父子iframe页面之间跨域通信传值postMessage()
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

1.父向子页面传值

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

    <!--a.vue父页面 -->
    frameLabelStart--frameLabelEnd 
//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里就是传过来的数据
    }
}

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里就是传过来的数据
    }
}
谢谢大家阅读⭐️⭐️⭐️,如果喜欢,可以点赞或留言哟💕💕💕
目录
相关文章
|
20天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
78 2
|
7天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
27 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
21天前
|
JavaScript
关于Vue非父子组件通信遇到的细节问题
本文讨论了Vue中非父子组件通信的一个细节问题,即当使用事件总线($eventsBus)进行通信时,需要确保两个组件能够同时在页面上显示,否则可能无法正确触发和监听事件。作者通过组件A和B的例子说明了这一点,并指出解决方案是在一个共同的父组件C中监听事件。
15 1
关于Vue非父子组件通信遇到的细节问题
|
7天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
14 1
|
21天前
Vue3基础(十san)___父子组件通信___props、emit___provide、inject
文章介绍了Vue3中父子组件通信的两种方式:通过`props`和`emit`传递数据和事件,以及使用`provide`和`inject`在组件树中传递数据。
38 0
Vue3基础(十san)___父子组件通信___props、emit___provide、inject
|
8天前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
19 0
|
8天前
|
JavaScript 前端开发
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
17 0
|
21天前
|
JavaScript
Vue3基础(23)___vue3非父子组件之间的通信
本文介绍了Vue 3中非父子组件间通信的方法,通过创建一个事件集合对象和相应的触发监听函数,实现跨组件的事件传递和监听。
21 0
|
2月前
|
JavaScript
如何在Vue页面中引入img下的图片作为背景图。../的使用
这篇文章介绍了在Vue页面中如何引入`img`目录下的图片作为背景图,提供了两种使用相对路径的方法。第一种是使用`../assets/img/`作为路径引入图片,第二种是使用`../../assets/img/`作为路径。文章还展示了使用这些方法的代码实现和效果展示,并鼓励读者学无止境。
如何在Vue页面中引入img下的图片作为背景图。../的使用
|
3月前
|
存储 资源调度 JavaScript
Vue.js组件通信策略详解
【7月更文挑战第17天】通过以上几种策略,Vue.js 提供了灵活且强大的组件间通信能力,使得开发者可以构建出结构清晰、易于维护的大型应用。