解决Iframe交互事件window.addEventListener触发多次问题

最新推荐文章于 2024-05-29 16:21:30 发布

是小橙丶

最新推荐文章于 2024-05-29 16:21:30 发布

阅读量1.5w

点赞数 3

分类专栏： js 文章标签： vue.js javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42125732/article/details/129744945

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前提解释

addEventListener() 方法用于向指定元素添加事件句柄。

提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

需求背景

当我们审批流交互用到window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。简单的来讲就是进行事件交互，如当我们有以下交互时，当判断type是我们需要的数据时，进行调审批拒绝接口操作，

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

  methods: {
    handleMesg: Debounce(function (e) {
        if (e.data.type == 'getDataDetail') {
          this.$refs.iframe.contentWindow.postMessage(
            workDetailsData.workflowList, //待办详情接口返回的数据
            '*'
          )
        }
        //商品中心调用拒绝接口 批注修改
        if (e.data.type == 'commodityRejected') {
            //调拒绝审批流接口
        }
     }）

}

但是此时我们发现会调用多次，当场景简单的时候可能造成不了影响，当场景复杂时，就会多次调用可能会进行数据覆盖导致发生一些奇奇怪怪的BUG

解决方案

解决这调用多次方法也简单，我们在进入这个页面时开始建立这个事件，在离开这个页面时销毁这个事件，保证每次进来就只有一个，此时我们的问题就解决啦

workflowMessageCbAdded: false, // 添加锁 定义一个锁

methods:{
    //建立addEventListener事件
    setupMessageListener() {
        if (!this.workflowMessageCbAdded) {
          window.addEventListener('message', this.handleMesg)
          this.workflowMessageCbAdded = true
        }
      },
    //销毁addEventListener事件
      removeMessageListener() {
        window.removeEventListener('message', this.removeMsg)
        this.workflowMessageCbAdded = false
      },
}

activated() {
  this.setupMessageListener()
},
created() {
  this.setupMessageListener()
},

deactivated() {
  this.removeMessageListener()
},
beforeDestroy() {
  this.removeMessageListener()
},