Javascript 清除现有iframe内容

我有一份文件清单。当我点击它们时，内容显示在一个框架内。我遇到的问题是：当我打开一个文件并移动到下一个文件时（如果文件的大小更大，则加载需要一些时间），旧文件的内容仍然显示在iframe中。一旦我点击下一个文件，我想清除iframe中旧文件的内容，同时它正在加载，我可以显示一个加载指示器

为了清除iframe中的内容，我尝试了一些方法，但没有成功。你能给我一些建议吗

我的HTML

<div id="result">
 <div style="overflow: auto;" id="testIframeBox">
 <iframe id="testiframe" name="testIframe" onload="">iFramenot supported</iframe></div>
</div>

要清除内容：

if(document.getElementById('testiframe'))
    {
    var frame = document.getElementById("testIframe"),
    frameDoc = frame.contentDocument || frame.contentWindow.document;
    frameDoc.documentElement.innerHTML="";
    }

window.frames['testIframe'].location.replace('div class="loading-animation"></div>');

此外，在填充内容之前，我尝试用加载指示器替换内容：

if(document.getElementById('testiframe'))
    {
    var frame = document.getElementById("testIframe"),
    frameDoc = frame.contentDocument || frame.contentWindow.document;
    frameDoc.documentElement.innerHTML="";
    }

window.frames['testIframe'].location.replace('div class="loading-animation"></div>');

window.frames['testIframe'].location.replace（'div class=“loading animation”>'）；

据我所知，您的问题分为两部分：

。。。要清除iframe中的内容

答案很简单，您可以使用

iframe

的

src

属性来控制其内容。普遍接受的做法是将

about:blank

分配给

src

，使其加载浏览器的默认空白文档

contentDocument

仅当您在

iframe

中加载的文档位于同一域时才应使用，否则跨域安全性会阻止您的尝试

..我试图在填充内容物之前用装载指示器替换内容物

这很棘手load事件在不同浏览器中持续触发，但这并不意味着文档已准备就绪

DOMContentLoaded

在跨浏览器的实现中是脆弱的。在我使用的浏览器中，至少Chrome无法启动它

DOMFrameContentLoaded

事件是特定于moz的，只有Firefox才会触发它

见此：

一种选择是使用jQuery并依赖于它的

on.（“load”）

处理程序，它可以为您提供几乎一致的结果。但是，正如我从您的问题中看到的，您没有使用jQuery，也没有依赖普通的Javascript。在这里，您最便宜的选择是处理

load

事件，并使用

setTimeout

注入

faux

延迟来模拟加载。下面的代码片段将向您说明这一点

片段：

document.getElementById（“a1”）.addEventListener（“单击”，加载）；
document.getElementById（“a2”）.addEventListener（“单击”，加载）；
document.getElementById（“TestFrame”）.addEventListener（“加载”，加载）；
函数加载（）{
var lnk=this.innerText；
var iframe=document.getElementById（“TestFrame”）；
iframe.src=“关于：空白”；
document.getElementById（“加载器”）.style.display=“块”；
setTimeout（函数（）{
iframe.src=lnk；/*小延迟，以避免连续的src分配问题*/
}, 500);
}
函数加载（）{
/*允许内容加载的人造延迟*/
setTimeout（函数（）{
document.getElementById（“加载器”）.style.display=“无”；
}, 1000);
}

div#测试框{
宽度：320px；高度：240px；
位置：相对位置；
}
iframe{
宽度：100%；高度：100%；
位置：绝对位置；
顶部：0px；左侧：0px；
}
div#testIframeBox>div{
位置：绝对位置；
顶部：16px；左侧：16px；
填充：8px；
背景颜色：黄色；
显示：无；
}

| 

加载。。。

前面有很多例子回答了这个问题。谢谢你这么详细的回复。成功了。伟大的