3

我有以下 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时，我得到一个 iframe，其内容foo.html如预期的那样。然后我刷新，然后点击bar。我没有得到 的内容bar.html，而是看到 的内容foo.html。奇怪的是，当我单击test时，它alert()告诉我srciframe 的属性已正确设置为bar.html. Firefox 没有这样的问题。

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

编辑：我忘了提到的是我不能放入 iframe 并更改 src 属性。在我的实际情况中，有时我需要一个<img>而不是一个<iframe>.

4

3 回答 3

3

使用这个 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(); 它对我来说还没有失败。

于 2009-01-22T14:08:41.683 回答
2

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

html:

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

脚本：

document.getElementById('myFrame').src='foo.html'
于 2009-01-22T14:07:09.737 回答
2

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

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

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

于 2009-01-22T14:20:48.630 回答