Question

我搜索了这个问题并尝试了许多片段;但一无所获。如何阻止iframe两次运行加载事件？

在<{3}}

运行的

PAGE.HTML：

<div class="regionBody">
    <iframe frameborder="0" allowtransparency="true" src="http://externaldomain.com/iframepage" height="215" style="border:none;width:100%;"></iframe>
</div>

<script>
$('.regionBody iframe').css({height: someCalculatedHeight});
</script>

在http://maindomain.com

运行的

IFRAMEPAGE.HTML：

<div>some elements...</div>
<script src="frame-script.js"/>

帧的script.js：

var requestsTimeout = null;

function doRequests(callback) {
    clearTimeout(requestsTimeout);
    $.ajax({
        cache: false,
        url: some-url,
        dataType: 'json',
        type: 'GET'
    }).done(function (data) {
        // putting the result in frame's body
    }).complete(function () {
        clearTimeout(requestsTimeout);
        callback();
    });
}

function startRequests() {
    requestsTimeout = setTimeout(function () {
        console.log('Doing requests...');
        doRequests(startRequests);
    }, 5000);
}

$(window).load(function () {
    console.log('IFrame loaded...');
    $(window).resize(function () {
        clearTimeout(requestsTimeout);
    });
    $(this).resize(function () {
        clearTimeout(requestsTimeout);
    });
    $('body').resize(function () {
        clearTimeout(requestsTimeout);
    });
    startRequests();
});

正如您所看到的，我已经尝试过任何可能阻止两次运行ajax请求的事情。但我仍然可以在控制台中看到ajax调用并行两次。我的意思是我同时收到重复Doing requests...条消息等。有什么建议吗？提前谢谢。

Answer 1

如果您只想执行一次请求，可以使用全局标志var来防止多次加载而不是超时：

var has_requested = false;     //The global flag

function doRequests(callback) {
    //Quit if there's a request in progress
    if(has_requested)
        return;

    has_requested = true;

    $.ajax({
        cache: false,
        url: some-url,
        dataType: 'json',
        type: 'GET'
    }).done(function (data) {
        // putting the result in frame's body
    }).complete(function () {
        callback();
    });
}

$(window).load(function () {
    //Don't forget to pass your callback here, I let it blank
    doRequests();
});

如果您只是想避免使用并行请求，可以在.done()和.complete()中将标记重置为false，这样只有在第一个请求达到时才会请求。

修改

如果您想重复一遍，请使用setInterval：

$(window).load(function () {
    //You'd better store the interval identifier to clear it afterwhile, 
    //if you think you'll need to.
    setInterval(doRequests,5000); 
});

如何防止iframe运行两次加载事件？

1 个答案:

修改