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

【问题标题】：Detect iFrame src change vs content reload检测 iFrame src 更改与内容重新加载
【发布时间】：2015-11-27 16:01:30
【问题描述】：

我的基本代码如下所示：

<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 分钟循环一次（页面显示运动结果）。

基本上它的工作方式是 iFrame 1 的 src 是使用$("#iFrame1").attr("src", "<new_url>"); 设置的。页面完全加载后，load 函数将触发并显示 iFrame1，隐藏 iFrame2。然后设置一个超时函数将下一页加载到 iFrame2 中，这将触发 load 函数并显示 iFrame2，隐藏 iFrame1。这样做是为了让用户看不到页面的加载，iFrame 仅在页面完成加载后才可见，从而实现页面之间的平滑过渡。

这一切都很好！问题是其中一个页面设置为在一天中的特定时间重新加载自身 (location.reload(true);)，而我无法控制该页面。这里的问题是，该页面的重新加载也会触发该 iFrame 的load 函数，从而导致该 iFrame 被错误地隐藏。

我的问题是，有没有办法区分 iFrame 更改的实际 src 与重新加载的 iFrame 的内容（并且 src 保持不变）？我看过document.referrer，但什么也没给我。

【问题讨论】：

标签： javascript jquery html iframe reload

【解决方案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
    }
});

【讨论】：