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

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 更改与内容重新加载

Detect iFrame src change vs content reload

html

javascript

iframe

jquery

reload