Unloading/Removing content from an iFrame

javascript jquery events dom iframe

101,560

Solution 1

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 = "";

Solution 2

Try this,

$("iframe").contents().find("body").html('');

It only clears innerHTML of your tag inside and not actually unload your iframe so you can reuse your iframe without reloading it and its working in all browsers and quite simple!!

Solution 3

If you generate dynamically the content of your iframe, all scripts/variable loaded will leak from one write to another. Thus the solution provided by @Eli of clearing the dom element will not work.

In short:

To clean, wrap your iframe into a div element and replace its dom content.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="wrapper">
    <iframe id="test"></iframe>
  </div>
</body>
</html>

To clean:

var wrapper = document.getElementById('wrapper');
wrapper.innerHTML= "<iframe id='test'></iframe>";

In details: Demo of script leakage

Example of script leakage between two iframe writes (tested with Chrome):

var iframe = document.getElementById('test');

// define variable 'a'
var content = "<html><body><script>var a=555;</script></body></html>";

iframe.contentWindow.document.open();
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();

// uncomment this to clean the iframe
//document.getElementById('wrapper').innerHTML= "<iframe id='test'></iframe>";

// write 'a' if defined
var content2 = "<html><body><div id='content'></div><script>document.getElementById('content').innerHTML=typeof a === 'undefined' ? 'undefined' : a;</script></body></html>";

var iframe2 = document.getElementById('test');
iframe2.contentWindow.document.open();
iframe2.contentWindow.document.write(content2);
iframe2.contentWindow.document.close();

If you run this code, you will see the output of the second iframe is 555 although it has been defined in the first iframe.

If you uncomment the middle part it will work as expected.

Solution 4

$('#frameID').contentWindow.document.body.innerHTML = '';

As with any iframe, this only works if you're on the same domain.

Solution 5

Removing and recreating the iframe is the safest solution here.

By removing only the innerHTML of the iframe you don't flush the variables stored, the bound eventListeners etc.

Be careful with this, it might cause a lot of problems (like memory leaks, multiple triggers of the same event etc).

View more solutions

101,560

Author by

Dan

Remote full stack developer, primarily interested in JavaScript.

Updated on April 05, 2021

Comments

Dan about 3 years

Is there anyway to unload a page that has been loaded inside an iframe? I do not want to change the iframe src to a blank page if possible. I am basically looking for something that will do something like this $('#frameID').attr("src",""); except that code does not seem to clear the previously loaded page.

Is there a "unload" function that I can call which will reset the iframe so that it does not have any content loaded inside?
Manoj Singh over 12 years

Good Solution, really appreciated!!
Ilmari Karonen about 12 years

As AJ Ostergaard pointed out in an edit suggestion, this can only work if the iframe is on the same domain as the main page. I rejected the edit for being misplaced, but his point is still correct and worth mentioning.
Luke about 11 years

@EliGrey This works perfectly for unloading (the first, non-innerHTML, solution), but once I have unloaded the content from an iframe, I cannot load anything back in by setting src... the iframe remains blank. How might I reuse the iframe once I have done this?
Robert over 8 years

But this only works if the iframe is loaded from the same domain, right?
donohoe over 7 years

By 'parent' do you mean the parent page, or parent element in the DOM that contained the IFRAME tag?
Antonis over 7 years

The parent element that contains the iframe
Manoj Mohan over 3 years

Thanks for the solution. Is there any alternative without removing the iframe?
Pankaj Goyal about 3 years

You saved the day month year for me. Thank you so much. Works like a charm. This should be accepted answer imo.