logo标签列表

重新加载页面时<iframe>的奇怪行为

htmliframe
4
我在同一目录下有三个简单的 HTML 文件：
index.html
    <html>
        <head>
            <title>Page 1</title>
        </head>
        <body>
            <iframe src="page2.html"></iframe>
        </body>
    </html>

"page2.html"和"page3.html"（内容大致相同）
    <html>
        <head>
            <title>Page 2</title>
        </head>
        <body>
            This is the content of page 2
        </body>
    </html>


    <html>
        <head>
            <title>Page 3</title>
        </head>
        <body>
            This is the content of page 3
        </body>
    </html>

index.html 包含一个指向另外两个 HTML 文件之一的 <iframe>。
当我第一次加载 index.html 时，它按预期工作并打印出“这是页面2的内容”。但是当我将 src 属性更改为“page3.html”，然后重新加载页面时，什么也没有改变。它继续告诉我“这是页面2的内容”，即使它应该加载页面3。
但是，当我关闭选项卡并重新打开页面（index.html）时，它可以正常工作并打印出“这是页面3的内容”。但是当我将其更改回 page2.html 时，它仍然停留在页面3上。
这很奇怪。我猜测浏览器正在缓存页面或类似的东西。
当我添加：
<script>
    document.write(document.querySelector("iframe").src);
</script>

然后，它会打印正确的文件位置。（但是iframe的内容仍然是错误的。）
这意味着即使浏览器检测到文件已更改，当页面重新加载时，它甚至不会重新加载iframe。
是什么导致了这种奇怪的行为？我该如何解决？
谢谢。
P.S. 使用Firefox 29进行测试。
P.S.（2）所有文件都在我的电脑上，我没有从远程服务器获取它们。
https://bugzilla.mozilla.org/show_bug.cgi?id=356558 - Matt Whipple
2个回答
2

尝试添加以下内容：

 document.getElementById(FrameID).contentDocument.location.reload(true);

每次重新加载页面时，这会强制iframe重新加载。

编辑：我尝试在Chrome中使用此方法，即使没有脚本也可以正常工作。

0
如果您计划经常更改此Iframe，则应通过Javascript动态创建iframe（重要提示-您将失去iframe上的FF缓存）：
HTML代码：
<!doctype html>
<html>
    <head>
        <title>Page 1</title>
    </head>
    <body>
        <div id="iframe_wrapper"></div>
    </body>
</html>

Javascript 代码：

document.addEventListener("DOMContentLoaded", function(event) {
    var iframeWrapper = document.getElementById("iframe_wrapper");
    var iframe = document.createElement("iframe");
    iframe.src="http://www.bing.com/";
    iframe.width = "400";
    iframe.height = "400";

    iframeWrapper.appendChild(iframe);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接