代码之家 › 专栏 › 技术社区 › Sietse

IE缓存动态添加的iframe。为什么,我该如何预防?

cross-browser dom internet-explorer html javascript

Sietse · 技术社区 · 16 年前

我有以下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.html ,正如预期的那样。然后我刷新,点击酒吧 . 而不是获取 bar.html ,我看到了 HTML . 奇怪的是,当我点击测试 , the alert() 告诉我 src iframe的属性正确设置为 巴尔 . 火狐没有这样的问题。

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

编辑: 我忘记提到的是,我不能将iframe放入并更改src属性。在实际情况下,有时我需要 <img> 而不是 <iframe> .

3 回复 | 直到 13 年前

Ria 16 年前

您是否尝试更改生成的iframe中的URL? 例如。

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

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

geowa4 16 年前

使用此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();它还没有失败。

Diodeus - James MacFarlane 16 年前

设置iframe的src,而不是更改其容器的innerhtml:

HTML:

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

脚本:

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

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

2 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

2 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

3 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

3 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

7 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

7 年前