vue组件与iframe通信,防止多次触发messag事件

简介: vue组件与iframe通信,防止多次触发messag事件

Vue组件中使用iframe,第二次进入iframe页面时,注册的messag被多次触发.


我的注册代码是:


mounted() {
    window.addEventListener('message', this.handleMessage)
  },


iframe中通知事件触发的代码:


window.parent.postMessage({ type: 'saveReport', value: res, formData: postData }, '*');


通过打印可知,多次进入iframe页面,触发iframe事件条件时:iframe中通知一次,但是包含iframe的vue页面监听事件执行多次


解决办法


在destory的生命周期中注销此事件,每次进入页面重新监听

destroyed() {
    window.removeEventListener('message', this.handleMessage)
  },

相关文章
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
4 0
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
1天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
2天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
8 0
|
2天前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
7 0
|
2天前
|
JavaScript 前端开发 开发者
new Vue() 发生了什么
new Vue() 发生了什么
9 1
|
2天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
6 0
|
1天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
1天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式