如何在加载后强制 iFrame 重新加载

Question

我有许多 iframe 可以在我的页面上加载特定内容。父级和 iframe 都在同一个域上。

我在 iframe 中有一个滚动条，它似乎无法在所有浏览器中正确加载。但是当我刷新 iframe 时，它​​会完美加载。我不知道它为什么这样做。

我使用了元刷新，它有效，但我不希望页面不断刷新，只刷新一次。

我正在寻找的解决方案将在打开 iFrame 后重新加载 iFrame 内容，延迟时间最短。

---

编辑

我意识到我的页面在加载索引时会加载我的所有 iframe。 iframe 出现在 jQuery 叠加层中，该叠加层也已加载但可见性：隐藏直到被调用。因此，在此调用中，我希望重新加载 iframe。

谁能帮我想出一个 Javascript 函数，当我单击 iFrame 的链接时重新加载 iFrame？我已经接近了，但我对 js 一无所知，而且我一直没能做到。我有一个重新加载页面的函数，但我不知道如何让它只调用一次。

到目前为止我有这个：

<script type="text/javascript">

var pl;
var change;
pl=1;

function ifr() {

if (pl=1) {
    document.location.reload([true]);
    alert("Page Reloaded!");
    change=1;
    return change;
}

change+pl;

}

所以基本上它使用 document.location.reload 来重新加载页面。然后我试图将 pl 更改为 1 以外的其他值，因此该函数不会再次运行。我一直在用 onLoad 从 body 调用这个 JS。

Answer 1

这方面的所有线索都死了，但我确实找到了一个有效的代码 sn-p。不是我写的，也不记得出处了。如果有人有同样的问题，发帖只是为了帮助他们。

<div class="overlay-content"> //Content container needed for CSS Styling
    <div id="Reloader"> 
        //iFrame will be reloaded into this div
    </div>

    //Script to reload the iframe when the page loads
    <script>
        function aboutReload() { 
            $("#Reloader").html('<iframe id="Reloader" height="355px" width="830px" scrolling="no" frameborder="0" src="about.html"></iframe>');
        }
    </script>
</div>

基本上只在带有 iFrame 的窗口打开时加载 iFrame 源，而不是在加载原始页面时加载 iFrame。

Answer 2

超出了原始问题的范围，但是此 jQuery 代码片段适用于跨域 iframe 元素，其中 contentDocument.location.reload(true) 方法不会由于沙盒。

//assumes 'this' is the iframe you want to reload.
$(this).replaceWith($(this).clone()); //Force a reload

基本上，它将整个 iframe 元素替换为自身的副本。我们正在使用它来强制调整嵌入的第 3 方“哑”小部件的大小，例如视频播放器，这些小部件在大小变化时不会注意到。

Answer 3

这是原始问题的完整解决方案：

<iframe onload="reloadOnce(this)" src="test2.html"></iframe>
<script>
var iframeLoadCount = 0;
function reloadOnce(iframe) {
  iframeLoadCount ++;
  if (iframeLoadCount <= 1) {
    iframe.contentWindow.location.reload();
    console.log("reload()");
  }
}
</script>

更新后的问题不是很清楚（什么是“iFrame 的链接”以及它在您的 sn-p 中的什么位置？），但是您的代码存在一些问题：

• “使用 onLoad 从正文调用此 JS”，假设您指的是 iframe 的正文，这意味着您希望用来避免无限重新加载的变量将在重新加载时与 iframe 页面的其余部分一起被破坏。您需要在 iframe 中加载一个稍微不同的 URL（并在重新加载之前检查 iframe 的 onload 上的 URL）或将标志变量放在外部页面中（并使用 parent.variableName 访问它 - 那我认为应该可以工作）
• if (pl=1) { 应该使用 ==，因为 = 始终是一个赋值。
• change+pl; 无效。

Answer 4

在 iframe 元素本身上，设置 onload：

iframe.onload = function() {this.contentWindow.location.reload(); this.onload = null;};

（仅当 iframe 的位置与主页位于同一域中时才有效）