Drupal 7模块中JavaScript回调事件重复执行问题

你遇到的这个问题核心很明确：每次加载iframe时，postMessage的事件监听器被重复绑定了——第一次加载时绑定一次，第二次加载又叠加绑定一次，后续同一个postMessage事件就会触发多个监听器回调，自然导致AJAX重复执行。下面是几个针对性的解决办法，结合Drupal 7的场景来给你梳理：

1. 绑定监听器前先移除旧的监听器 #

把处理postMessage的回调抽成独立的命名函数，每次添加监听器前先移除之前绑定的同个函数，确保始终只有一个监听器生效。

比如你原来的代码可能是匿名函数绑定：

window.addEventListener('message', function(event) {
  // 处理postMessage并发起AJAX请求
  $.ajax({
    url: '/your-drupal-module-callback-path',
    type: 'POST',
    data: event.data,
    // 其他AJAX配置
  });
});

改成这样：

// 抽成命名函数，方便后续移除
function handleIframeMessage(event) {
  // 处理postMessage并发起AJAX请求
  $.ajax({
    url: '/your-drupal-module-callback-path',
    type: 'POST',
    data: event.data,
    // 其他AJAX配置
  });
}

// 先移除旧监听器，再绑定新的
window.removeEventListener('message', handleIframeMessage);
window.addEventListener('message', handleIframeMessage);

这样每次加载iframe时，都会先清理掉之前的监听器，再重新绑定，不会出现重复累积的情况。

2. 用Drupal自带的jQuery.once()确保只绑定一次 #

Drupal 7自带了jQuery.once()方法，它会给绑定事件的元素添加唯一标记，确保同个处理函数只会被绑定一次，不管你执行多少次绑定代码：

$(window).once('iframe-message-handler').on('message', function(event) {
  // 处理postMessage和AJAX请求的逻辑
});

这种方法很适合Drupal场景，不用自己手动管理监听器的移除，框架层面帮你控制了绑定次数。

3. 在iframe卸载时主动清理监听器 #

如果你的业务允许，可以在iframe即将卸载（比如页面跳转、重新加载前）时，主动移除postMessage监听器，避免下次加载时重复绑定：

// 假设你的iframe元素选择器是$('#target-iframe')
$('#target-iframe').on('beforeunload', function() {
  window.removeEventListener('message', handleIframeMessage);
});

每次iframe卸载时清理监听器，下次加载时再重新绑定，从根源上杜绝重复绑定的问题。

4. 给AJAX请求加锁（兜底方案） #

如果上面的方法都没完全解决，还可以给AJAX请求加个执行锁，确保同一时间只有一个请求在运行：

let isAjaxInProgress = false;

function handleIframeMessage(event) {
  // 如果已有请求在执行，直接返回
  if (isAjaxInProgress) return;

  isAjaxInProgress = true;
  $.ajax({
    url: '/your-drupal-module-callback-path',
    type: 'POST',
    data: event.data,
    success: function(response) {
      // 处理成功逻辑
    },
    complete: function() {
      // 请求完成后释放锁
      isAjaxInProgress = false;
    }
  });
}

这个方法属于兜底防护，哪怕监听器还是重复绑定了，也只会执行一次AJAX请求。

内容的提问来源于stack exchange，提问作者Andrés C.