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

时间:2014-05-06 02:26:18

标签: html iframe

我在同一目录中有三个简单的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)所有文件都在我的电脑上,我没有把它们放在远处的服务器上。

2 个答案:

答案 0 :(得分:2)

尝试添加以下内容:

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

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

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

答案 1 :(得分: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);
});