解决Iframe交互事件window.addEventListener触发多次问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决Iframe交互事件window.addEventListener触发多次问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前提解释

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

解决方案

解决这调用多次方法也简单，我们在进入这个页面时开始建立这个事件，在离开这个页面时销毁这个事件，保证每次进来就只有一个，此时我们的问题就解决啦文章来源地址https://www.toymoban.com/news/detail-514091.html

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()
},

到了这里，关于解决Iframe交互事件window.addEventListener触发多次问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！