Iframe 加载回调被多次调用

Iframe load callback is called multiple times

本文关键字：调用 加载 回调 Iframe      更新时间：2023-09-26

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

<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>

我有一个按钮，这个函数发送流量被调用。我看到的是测试完成警报第一次出现一次，第二次两次，第三次三次，并且它一直在继续。

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

无法弄清楚我做错了什么。我正在使用推特引导程序，仅供参考。

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

就像其他人说的那样，您的.load()事件应该只注册一次。

如果其他答案中发布的解决方案对您不起作用（尽管它应该），还有另一种方法

.one() ：

将处理程序附加到元素的事件。处理程序在每个事件类型的每个元素最多执行一次

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

演示

其他答案中张贴的 Althought 解决方案更合适。但是，我会删除onclick属性并使用jQuery为元素设置单击事件处理程序。

为了避免歧义（因为.load()也是用于 AJAX 请求的方法），我建议使用 .on() 来绑定load事件处理程序

<iframe id="WAFTest"></iframe>
<button type="button" data-ping="sendping" class="btnSendPing btn btn-primary btn-lg">Send Ping Traffic</button>
<input id="serverIpaddr" value="something" />



$(document).ready(function(){
    $('.btnSendPing').click(function(){
        var ipAddr = $("#serverIpaddr").val();
        var typeOfTraffic = $(this).data('ping');
        $("#WAFTest").attr("src", '/cgi-bin/test.py?wat='+typeOfTraffic+'&ipaddr='+ipAddr);
    });
    $("#WAFTest").on('load', function () {
        alert("Test done");
    });
});

演示

每次调用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>

希望这有帮助！

每次调用 

$("#WAFTest").load(function () {
    alert("Test done");
});

您正在将新的事件侦听器绑定到 iframe 的加载事件。

您必须将调用放在函数之外，因此它只被调用和绑定一次。

编辑：

为了防止代码失败，当调用代码片段时 DOM 还没有准备好时，你必须将其包装在 jQuery 的 ready 函数中。

$(document).ready(function(){
    $("#WAFTest").load(function () {
        alert("Test done");
    });
})
相关文章：