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

Posted 2023-02-22

【中文标题】如何在加载后强制 iFrame 重新加载

【英文标题】：How to force an iFrame to reload once it loads

【发布时间】：2011-12-12 16:43:36

【问题描述】：

我有许多 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。

【参考方案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"   scrolling="no" frameborder="0" src="about.html"></iframe>');
        
    </script>
</div>

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

【参考方案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 方“哑”小部件的大小，例如视频播放器，这些小部件在大小变化时不会注意到。

【参考方案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; 无效。

【讨论】：

让我尝试清除“指向 iFrame 的链接”... 当访问者单击指向附加内容的链接时，例如“关于”页面，附加内容会通过框架。所以“iFrame 链接”将是“关于”页面上的任何链接（可能是“关于我”“关于你”“常见问题解答”等）......这些附加页面是使用 iFrame 的内容。所有 iFrame 都会在初次访问 index.php 页面时加载。但是当通过点击他们各自的链接调用时，我需要他们刷新。我会尝试这个解决方案。感谢您在此问题上的宝贵时间！

我尝试将您的代码放入其中，但没有成功。我是否正确实施了这一点？ code <iframe height="425px" width="830px" scrolling="no" frameborder="0" src="about-homeopathy.html" onload="reloadOnce(this)"></iframe> code <script> var iframeLoadCount = 0; function reloadOnce(iframe) iframeLoadCount ++; if (iframeLoadCount <= 1) iframe.contentWindow.location.reload(); console.log("reload()"); </script>

这对我有用 - 我在 iframe 正上方添加了脚本，然后添加了 onload 属性。像魅力一样工作！

【参考方案4】：

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

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

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

【讨论】：

我建议在事件处理程序中使用this 而不是iframe，以防变量iframe 被覆盖。

好点。会编辑。 （我习惯了很多闭包，所以变量名不太可能被覆盖：p）

感谢大家的快速回复！ iframe 加载 about.html，父级是 index.php。我是否将此代码放在

@Brett：在父页面中。这个答案并没有真正明确将它放在哪里，因为要设置 iframe.onload 您必须等到 iframe 在 DOM 中，但是如果您等待父级的“加载”事件，则 iframe 可能已经或可能已经到那个时候加载。

一个未经测试的想法是将