IE 缓存动态添加的 iframe。为什么，我该如何预防？答案

【问题标题】：IE caches dynamically added iframe. Why, and how do I prevent it?IE 缓存动态添加的 iframe。为什么，我该如何预防？
【发布时间】：2011-08-12 04:19:23
【问题描述】：

我有以下 HTML / JS：

<html>
  <body>
    <script>
      function foo(){
        var html = "<iframe src=\"foo.html\" />";
        document.getElementById('content').innerHTML=html;
      }

      function bar(){
        var html = "<iframe src=\"bar.html\" />";
        document.getElementById('content').innerHTML=html;
      }

      function show(){
        alert(document.getElementById('content').innerHTML);
      }
    </script>
    <button onclick="foo()">foo</button><br />
    <button onclick="bar()">bar</button><br />
    <button onclick="show()">test</button><br />    

    <div id="content"></div>
  </body>
</html>

即使在 IE 中也能按预期工作。直到我按下F5。当我第一次单击 foo 时，我得到了一个包含 foo.html 内容的 iframe，正如预期的那样。然后我刷新并点击bar。我没有得到bar.html 的内容，而是看到了foo.html 的内容。奇怪的是，当我单击 test 时，alert() 告诉我 iframe 的 src 属性正确设置为 bar.html。 Firefox 没有这样的问题。

为什么会发生这种情况，我该如何预防？

edit: 我忘了说的是我不能把 iframe 放进去并改变 src 属性。在我的实际情况中，有时我需要<img> 而不是<iframe>。

【问题讨论】：

标签： javascript html internet-explorer dom cross-browser

【解决方案1】：

使用这个 DOM

<div id="content" style='display:none;'>

  <iframe id='contentFrame' src='' />

</div>

这是你的脚本

function foo() {
  var contentDiv = document.getElementById('content');
  var contentFrame = document.getElementById('contentFrame');

  contentFrame.src = 'foo.html';
  contentDiv.style.display='block';
}

我注意到 IE 和使用 innerHTML 的一些奇怪行为。我只会用它来清除内容（innerHTML = ""）。如果我想添加任何东西，我使用 HTMLElement.appendChild();它对我来说还没有失败。

【讨论】：

【解决方案2】：

您是否尝试过更改生成的 iframe 中的网址？例如。

var randomNum = Math.random();
var html = "<iframe src=\"bar.html?rand="+randomNum+"\" />";

更好的是，将它与 geowa4 的 appendChild() 建议结合起来。

【讨论】：

【解决方案3】：

设置 iframe 的 SRC，而不是更改其容器的 innerHTML：

html:

<iframe id="myFrame" src="about:blank" />

脚本：

document.getElementById('myFrame').src='foo.html'

【讨论】：