Question

我有以下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没有这样的问题。

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

编辑： 我忘记提到的是我无法将iframe放入并更改src属性。在我的实际情况中，有时我需要<img>而不是<iframe>。

Answer 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（）;我还没有失败。

Answer 2

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

HTML：

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

脚本：

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

Answer 3

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

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

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

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

3 个答案: