Unloading/Removing content from an iFrame

2019-01-16 19:09发布

站内文章 / JavaScript

34 0

老娘就宠你

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

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

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

回答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.

Related question: Avoiding memory leaks loading content into an iframe

回答4:

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

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

回答5:

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

回答6:

$("#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

回答7:

Removing and recreating the iframe is the smartest solution here (no offense towards the other answers).

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

回答8:

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.

回答9:

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="...">');

回答10:

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

回答11:

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

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

回答12:

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.