iframe加载回调被多次调用

Question

我有一个简单的网页和以下脚本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
      function sendTraffic(typeOfTraffic){
        var ipAddr = document.getElementById("serverIpaddr").value;
        //alert(ipAddr);
        $("#WAFTest").attr("src", '/cgi-bin/test.py?wat='+typeOfTraffic+'&ipaddr='+ipAddr);
        $("#WAFTest").load(function () {
            alert("Test done");
        });
    }
    </script>

我有一个按钮，并且调用了这个函数 sendTraffic 。我看到的是测试完成警报第一次出现一次，第二次出现两次，第三次出现三次，并且它一直持续下去。

<button type="button" id="btnSendPing" class="btn btn-primary btn-lg" onclick="sendTraffic('sendping')">Send Ping Traffic</button>

我无法弄清楚我做错了什么。我正在使用 twitter bootstrap 仅供参考。

编辑：我在 Mac 上使用 chrome。#WAFTest 是一个 Iframe。我只是想从服务器获取数据并将其加载到 Iframe。

Answer 1

每次调用时，sendTraffic()您都会绑定事件处理程序的一个新实例，这解释了您所描述的行为：第一次调用它时，您会附加一个load事件处理程序，然后iframe加载并触发事件。第二次调用该函数时，会将事件处理程序的另一个load副本绑定到该事件，因此两个处理程序都会在下次iframe加载时执行。

解决方案非常简单：只需将事件绑定放在外面即可sendTraffic()：

<script>
  function sendTraffic(typeOfTraffic) {
    var ipAddr = document.getElementById("serverIpaddr").value;
    //alert(ipAddr);
    $("#WAFTest").attr("src", '/cgi-bin/test.py?wat='+typeOfTraffic+'&ipaddr='+ipAddr);
  }
  $("#WAFTest").load(function() {
    alert("Test done");
  });
</script>

希望这可以帮助！