清除現有的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>