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

与其他人一样，您的.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");
    });
}

DEMO

尽管在其他答案中发布的解决方案更合适。但是我会删除onclick属性并使用jQuery为元素设置click事件处理程序。

为避免含糊不清（因为.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");
    });

});

DEMO

Answer 2

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

解决方案非常简单：只需在iframe之外进行事件绑定：

sendTraffic()

希望这有帮助！

Answer 3

每次调用

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

您正在将新的Event-Listener绑定到iframe的load事件。

你必须把调用放在函数之外，所以它只被调用并绑定一次。

修改

为防止代码失败，当调用代码片段时DOM未准备就绪时，必须将其包装在jQuery的ready函数中

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

iframe加载回调被多次调用

3 个答案: