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

Question

我在我的页面中有许多iframe，它们加载特定内容。父元素和iframe在同一域名下。

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

我已经使用了meta refresh，它可以工作，但我不想让页面不断刷新，只需要刷新一次。

我正在寻找的解决方案是在打开iFrame后重新加载iFrame内容，延迟尽可能小。

---

编辑

我意识到我的页面在索引加载时加载了所有的iframes。这些iframes出现在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。

- Brett

Answer 1

所有相关的线索都已经断了，但我找到了一个有效的代码片段。这不是我写的，我也记不得它来自哪里。只是想发布这个帖子来帮助有同样问题的人。

<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。

- Brett

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 元素。我们将其用于强制调整嵌入的第三方“哑”小部件的大小，例如视频播放器，这些小部件不会注意到其大小的变化。

- John Pettitt

Answer 3

在iframe元素本身上设置一个onload事件：

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

（仅在iframe所在的位置与主页面相同的域名下才有效）

- Niet the Dark Absol

---

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

好的，我会修改。我习惯于使用许多闭包，所以变量名很少被覆盖 :p - Niet the Dark Absol

谢谢大家的快速回复！iframe 加载 about.html，而父页面是 index.php。我要把这段代码放在 about.html 的头部，放在 <script> 标签里吗？ - Brett

@Brett：在父页面中。这个答案并没有很清楚地说明要把它放在哪里，因为要设置iframe.onload，你必须等到iframe在DOM中，但如果你等待父级的“load”事件，那么iframe可能已经加载完成或者还未加载完成。 - Nickolay

一个未经测试的想法是在HTML中放置<iframe onload="reloadOnce(this)">；使reloadOnce函数检查一个标志，然后如果它没有设置，就设置它并重新加载框架。 - Nickolay

@Nickolay 我尝试了你未经测试的想法，但它没有起作用。但我可能做错了。我也尝试了上面提到的iframe.onload的几种方式，但都无法使其工作。我正在更新我的问题，我意识到了一些新的东西。 - Brett

Answer 4

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

<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的链接”在你的片段中是什么意思？），但你的代码存在一些问题：

- “从onLoad函数调用此JS”，假设你指的是iframe的body，那么当重新加载时，你希望使用以避免无限重载的变量将与iframe页面的其余部分一起被覆盖。你需要在iframe中加载一个略微不同的URL（并在iframe的onload事件中检查URL），或者将标志变量放在外部页面中（并使用parent.variableName访问它-我认为这应该可以工作）。 - if (pl=1) {应该使用==，因为=总是一个赋值操作。 - change+pl;没有任何效果。

- Nickolay

---

让我试着澄清一下“链接到iFrame”的问题...当访问者点击关于页面上的其他内容的链接时，通过iFrame显示其他内容。因此，“iFrame链接”将是“关于”页面上的任何链接（例如“关于我”、“关于你”、“常见问题”等）...这些附加页面是使用iFrames的。所有的iFrame都会在访问index.php页面时加载。但是，当它们被单击其各自的链接调用时，我需要它们刷新。我会尝试这个解决方案。谢谢您在这个问题上花费的时间！ - Brett

我尝试将你的代码放进去，但它没有起作用。我实现得对吗？`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> ` - Brett

这对我有效 - 我将脚本添加到 iframe 正上方，然后加上了 onload 属性。非常顺利！ - William H