How to Clear the Contents of an Iframe from Another Iframe

How to clear the contents of an iFrame from another iFrame

Try using Channel messaging

wrapperPage.html

<body>
<div class=non-floater>
    <iframe class="header" src="header.html"></iframe>
    <iframe class="pageBody" src="pageBody.html" /> 
</div>
<script>
  var channel = new MessageChannel();
  var header = $(".header")[0].contentWindow;
  var pageBody = $(".pageBody")[0].contentWindow;
  header.onload = function() {
    this.postMessage("","*", [channel.port2])
  };

  channel.port1.onmessage = function(e) {
    if (e.data === "clicked") {
      $(pageBody.document.body).html("")
    }
  }
</script>
</body>

header.html

<body>
<a class="clearLink" href="#">Navigation Button</a>
<script>
  var port;

  onmessage = function(e) {
    port = e.ports[0];
  }

  $(".clearLink").on("click", function(e) {
      port.postMessage("clicked");
  });
</script>
</body>

How to clear the content of an IFRAME?

about:blank

is a "URL" that is blank. It's always clear

You can set the page's source to that, and it will clear.

clear existing iframe contents

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>     |     <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>

how do i change the iframe content from another iframe?

This can be done by using Two way iframe communication.

You can read more about it here https://bl.ocks.org/pbojinov/8965299 and check out their example.

Unloading/Removing content from an iFrame

The other solutions use innerHTML, which won't always work in XHTML. They also only clear document.body (anything in the <head> is still present). Here is a solution that uses the DOM:

var frame = document.getElementById("myFrame"),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.removeChild(frameDoc.documentElement);

This solution uses innerHTML:

var frame = document.getElementById("myFrame"),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.documentElement.innerHTML = "";

How to clear an iframe of all content?

See Oscar Jara's answer to a similar question here:

https://stackoverflow.com/a/11658546/4669143

If the iframe origin in the same as the enclosing site's origin, you should be able to do it without violating the cross-domain policy. Otherwise, it won't work.

He includes a working fiddle.

altering contents inside iframe and remove unwanted elements

Remember: The src of iframe should also have to be in the same domain. This is due to security reasons.

Yet you can use load/html such way:

$("#container").html(function(){
    // There could be multiple target elements, i guess you should loop and return the html
    var htm = '';
    $("#survey").contents().find(".requiredDiv").each(function(){
       htm += this;  
    });
    return htm;
});

using .load():

$("#container").load($("#survey").contents().find(".requiredDiv"));

How to Clear the Contents of an Iframe from Another Iframe