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

Question

我有大量的iframes加载特定的内容在我的网页上。父域和iframe都位于相同的域中。

我在iframe中有一个滚动条，它似乎没有在所有浏览器中正确加载。但是当我刷新iframe的时候，它的负载就完美了。我不知道它为什么要这么做。

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

我正在寻找的解决方案将在打开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从身体上给这个JS打电话。

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。

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元素。我们使用它来强制调整嵌入式第三方“哑”小部件的大小，比如视频播放器没有注意到其大小的变化。

Answer 3

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

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

(只有当iframe的位置位于与主页相同的域中时才能工作)