Question

我在同一目录中有三个简单的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包含<iframe>，指向其他两个HTML文件之一。

当我第一次加载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）所有文件都在我的电脑上，我没有把它们放在远处的服务器上。

Answer 1

尝试添加以下内容：

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

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

编辑：我使用Chrome进行了尝试，即使没有脚本也能正常运行。

Answer 2

如果你打算经常更改这个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);
});

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

2 个答案: