清除现有的iframe内容

Question

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

要清除iframe中的内容，我尝试了一些方法，但无法成功。你能告诉我这个

我的HTML

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

我出现使用点击文件location.replace

window.frames['testIframe'].location.replace(URL+"&download=1&inline=1&resourceId="+resourceId+"&time=" + Date.now()); 

要清除内容：

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>'); 

Answer 1

据我了解，有两个部分你的问题：

1. ...要清除里面的iframe的内容...

这个问题的答案很简单，您可以使用iframe的src属性来控制其内容。通常采用的做法是将about:blank分配给src，以使其加载浏览器的默认空白文档。

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

..我试图填充内容之前更换与负载指示符的内容..

这是棘手。 iframe上的事件确实跨浏览器触发，但这并不意味着文档已准备就绪。 DOMContentLoaded在其跨浏览器的实现方面很差。在我使用的浏览器中，至少Chrome未能触发它。 DOMFrameContentLoaded事件是moz具体而且只有Firefox触发它。

看到这个：How to properly receive the DOMContentLoaded event from an XUL iframe?与您

一种选择是使用jQuery和依靠其on.("load")处理器可以为您提供接近一致的结果。但是，正如我从你的问题中看到的，你并没有使用jQuery，而是依赖于纯粹的Javascript。在这里，IMO最便宜的选项是处理load事件，并使用setTimeout注入faux延迟来模拟加载。以下片段将向您明确说明。

片段：

document.getElementById("a1").addEventListener("click", load); 
 
document.getElementById("a2").addEventListener("click", load); 
 
document.getElementById("testiframe").addEventListener("load", loaded); 
 

 
function load() { 
 
    var lnk = this.innerText; 
 
    var iframe = document.getElementById("testiframe"); 
 
    iframe.src = "about:blank"; 
 
    document.getElementById("loader").style.display = "block"; 
 
    setTimeout(function() { 
 
     iframe.src = lnk; /* small delay to avoid successive src assignment problems */ 
 
    }, 500); 
 
} 
 

 
function loaded() { 
 
    /* faux delay to allow for content loading */ 
 
    setTimeout(function() { 
 
     document.getElementById("loader").style.display = "none"; 
 
    }, 1000); 
 
    
 
}

div#testIframeBox { 
 
    width: 320px; height: 240px; 
 
    position: relative;  
 
} 
 

 
iframe { 
 
    width: 100%; height: 100%; 
 
    position: absolute;  
 
    top: 0px; left: 0px; 
 
} 
 

 
div#testIframeBox > div { 
 
    position: absolute; 
 
    top: 16px; left: 16px; 
 
    padding: 8px; 
 
    background-color: yellow; 
 
    display: none; 
 
}

<div> 
 
    <a href="#" id="a1">http://jquery.com</a> 
 
    &nbsp;|&nbsp; 
 
    <a href="#" id="a2">http://example.com</a> 
 
</div> 
 
<hr /> 
 
<div id="result"> 
 
    <div id="testIframeBox"> 
 
     <iframe id="testiframe" name="testIframe"></iframe> 
 
     <div id="loader">Loading...</div> 
 
    </div> 
 
</div>