Question

我的基本代码如下：

<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>

$("#iFrame1").load(function () {
        // display iFrame1, hide iFrame2
        // set timeout to load next page
    });
$("#iFrame2").load(function () {
        // display iFrame2, hide iFrame1
        // set timeout to load next page
    });

我有一组页面（相同的域，在iFrame中显示没有问题）将在iFrame中显示（一次只能看到1个iFrame），以30分钟的间隔循环（页面显示运动结果）。

基本上它的工作方式是使用$("#iFrame1").attr("src", "<new_url>");设置iFrame 1的src。页面完全加载后，load功能会触发并显示iFrame1，隐藏iFrame2。然后设置超时功能以将下一页加载到iFrame2中，这将触发load功能并显示iFrame2，隐藏iFrame1。它已经通过这种方式完成，因此用户看不到页面的加载，只有在页面加载完成后iFrame才会显示，这样可以在页面之间平滑过渡。

一切正常！问题是其中一个页面设置为在一天的特定时间重新加载（location.reload(true);），我无法控制该页面。这里的问题是该页面的重新加载也会触发该iFrame的load功能，这会导致iFrame被错误地隐藏。

我的问题是，有没有办法区分iFrame更改的实际src，而只是重新加载的iFrame的内容（以及src保持不变）？我看过document.referrer，但这对我没有任何帮助。

Answer 1

我最后通过在每个iFrame的load函数中添加一项检查来解决我的问题，以检查iFrame是否已经可见。如果iFrame当前不可见，则仅进行交换..

<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>

$("#iFrame1").load(function () {
    // If iFrame 1 is hidden, show it
    if($("#iFrame1").css("display") == "none")
    {
            // display iFrame1, hide iFrame2
            // set timeout to load next page
    }
});
$("#iFrame2").load(function () {
    // If iFrame 2 is hidden, show it
    if($("#iFrame2").css("display") == "none")
    {
            // display iFrame2, hide iFrame1
            // set timeout to load next page
    }
});

检测iFrame src更改与内容重新加载

1 个答案: