CODEWITHSUNDEEP
javascriptjqueryeventsdomiframe
Dan
Dan

Reputation: 991

Unloading/Removing content from an iFrame

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?

Upvotes: 40

Views: 116696

Answers (12)

Adonis K. Kakoulidis
Adonis K. Kakoulidis

Reputation: 5133

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

Upvotes: 4

qwertzguy
qwertzguy

Reputation: 17727

If you had previously loaded content by setting the src property of the iframe, you cannot empty the content as it is a violation of cross site scripting.

You can then just set the src property to '' which will make the browser discard the whole content.

$('iframe').prop('src', '');

Upvotes: 1

Antonis
Antonis

Reputation: 557

var frame = document.getElementById("myframe");
frame.src = "about:blank";

This worked from me and prevented memory leaks too. In my case I had to destroy the parent too. In that case you have to destroy the parent with some delay to prevent memory leak

Upvotes: 5

JBE
JBE

Reputation: 12597

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.

Related question: Avoiding memory leaks loading content into an iframe

Upvotes: 11

sevmusic
sevmusic

Reputation: 126

This worked for me, cleared everything within the iframe tag; body, head, html and all:

$("iframe").contents().empty();

Upvotes: 1

Frank James
Frank James

Reputation: 157

function getContentFromIframe(iFrameName)
{

var myIFrame = document.getElementById(iFrameName);
var content = myIFrame.contentWindow.document.body.innerHTML;

//Do whatever you need with the content    

}

it will definitely work !!!!!!!!!!!!!!!!

Upvotes: -1

mayurk
mayurk

Reputation: 121

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

Upvotes: 8

Kumar
Kumar

Reputation: 237

You can trigger unload event of that iframe like

$('body').trigger('unload');

and then remove the iframe from the parent window and reload a new iframe with new src when needed.

$('#iframe_wrapper').html('');
$('#iframe_wrapper').html('<iframe src="...">');

Upvotes: 0

Eli Grey
Eli Grey

Reputation: 35860

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

Upvotes: 37

Besik
Besik

Reputation: 33

$("#frameId").contents().find("div#SomeDIVinsideFrame").remove(); // removes some div content inside iframe

$("#FrameId").remove(); // removes frame

had same problem to show iframe news on http://www.livepage.info

Upvotes: 1

geowa4
geowa4

Reputation: 41823

First, get the document of the frame:

var frame = $('#frameId').get(0);
var frameDoc = frame.contentDocument || frame.contentWindow.document;

Then, blank it:

frameDoc.getElementsByTagName('body')[0].innerHTML = "";

I think this should work too:

$('body', frameDoc).html("");

Now, you might want to do something with any scripts that might be loaded in the head, but this should get you started.

Upvotes: 0

Steve Brewer
Steve Brewer

Reputation: 2100

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

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

Upvotes: 4

Related Questions