clear existing iframe contents

Question

I have a list of files. When i click on them, the contents are displayed inside an frame. The problem i have is: when i open one file and move to next one (if the file is of greater size, it takes some time to load), the contents of old file still shows up in iframe. As soon as i click next file, i want to clear the contents of old file in iframe and meanwhile it's loading i can display a loading indicator.

To clear the contents inside iframe i tried some ways but could not succeed. Can you advise me on this

My HTML

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

I show up the clicked file using location.replace

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

To clear contents:

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

Also i tried to replace the contents with loading indicator before filling the contents:

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

This was answered previously with many examples. http://stackoverflow.com/questions/1785040/how-to-clear-the-content-of-an-iframe — Sswell410, Nov 24 '14 at 13:49

score 3 · Accepted Answer · edited May 23 '17 at 12:01

As I understand, there are two parts to your question:

... To clear the contents inside iframe ...

The answer to this is simple, you use the src attribute of the iframe to control its contents. Commonly accepted practice is to assign a about:blank to the src to cause it to load browsers's default blank document.

contentDocument is supposed to be used only when the document which you are loading in your iframe is in the same domain, otherwise cross-domain security blocks your attempts.

..I tried to replace the contents with loading indicator before filling the contents..

This is tricky. load event on iframe does fire consistently across browsers, but this does not mean the document is ready. DOMContentLoaded is flaky in its implementation across browsers. Of the browsers I use, at least Chrome fails to fire it. DOMFrameContentLoaded event is moz specific and only Firefox fires it.

See this: How to properly receive the DOMContentLoaded event from an XUL iframe?

One option with you is to use jQuery and rely on its on.("load") handler which may provide you with near-consistent results. But, as I see from your question that you are not using jQuery and relying on plain-vanilla Javascript. Here, IMO the cheapest option for you is to handle the load event and inject a faux delay using setTimeout to simulate loading. The following snippet will make it clear to you.

Snippet:

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>

clear existing iframe contents

1 Answers1