从 iFrame 卸载/删除内容

Question

Is there anyway to unload a page that has been loaded inside an iframe?无论如何要卸载已加载到 iframe 中的页面？ I do not want to change the iframe src to a blank page if possible.如果可能，我不想将 iframe src 更改为空白页面。 I am basically looking for something that will do something like this $('#frameID').attr("src","");我基本上是在寻找可以做这样的事情的东西$('#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?是否有我可以调用的"unload"函数来重置 iframe，使其内部没有加载任何内容？

Answer 1

The other solutions use innerHTML , which won't always work in XHTML.其他解决方案使用innerHTML ，这在 XHTML 中并不总是有效。 They also only clear document.body (anything in the <head> is still present).他们也只清除document.body （ <head>中的任何内容仍然存在）。 Here is a solution that uses the DOM:这是一个使用 DOM 的解决方案：

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

This solution uses innerHTML :此解决方案使用innerHTML ：

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

Answer 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!!它只清除内部标签的innerHTML，而不是实际卸载iframe，因此您可以重用iframe 而无需重新加载它，它在所有浏览器中都可以工作，而且非常简单！

Answer 3

If you generate dynamically the content of your iframe , all scripts/variable loaded will leak from one write to another.如果动态生成 iframe 的内容，则加载的所有脚本/变量将从一个写入泄漏到另一个写入。 Thus the solution provided by @Eli of clearing the dom element will not work .因此，@Eli 提供的清除 dom 元素的解决方案将不起作用。

In short:简而言之：

To clean, wrap your iframe into a div element and replace its dom content.要清理，请将 iframe 包装到 div 元素中并替换其 dom 内容。

<!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):两次 iframe 写入之间的脚本泄漏示例（使用 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.如果您运行此代码，您将看到第二个 iframe 的输出为555尽管它已在第一个 iframe 中定义。

If you uncomment the middle part it will work as expected.如果您取消注释中间部分，它将按预期工作。

Related question: Avoiding memory leaks loading content into an iframe相关问题：避免内存泄漏将内容加载到 iframe

Answer 4

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

As with any iframe, this only works if you're on the same domain.与任何 iframe 一样，这仅在您位于同一个域中时才有效。

Answer 5

Removing and recreating the iframe is the safest solution here.删除并重新创建 iframe 是这里最安全的解决方案。

By removing only the innerHTML of the iframe you don't flush the variables stored, the bound eventListeners etc.通过仅删除 iframe 的innerHTML ，您不会刷新存储的变量、绑定的 eventListeners 等。

Be careful with this, it might cause a lot of problems (like memory leaks, multiple triggers of the same event etc).小心这一点，它可能会导致很多问题（如内存泄漏、同一事件的多个触发器等）。

Answer 6

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在这种情况下，您必须延迟销毁父级以防止内存泄漏

Answer 7

This worked for me, cleared everything within the iframe tag;这对我有用，清除了 iframe 标签中的所有内容； body, head, html and all:身体、头部、html 和所有：

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

Answer 8

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.如果您之前通过设置 iframe 的src属性加载了内容，则无法清空内容，因为这违反了跨站点脚本。

You can then just set the src property to '' which will make the browser discard the whole content.然后您可以将src属性设置为''这将使浏览器丢弃整个内容。

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

Answer 9

$("#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在http://www.livepage.info上显示 iframe 新闻时遇到了同样的问题

Answer 10

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.现在，您可能想要对可能加载到头部的任何脚本执行某些操作，但这应该可以帮助您入门。

Answer 11

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 !!!!!!!!!!!!!!!!它肯定会工作!!!!!!!!!!!!!!!!!!

Answer 12

You can trigger unload event of that iframe like您可以触发该 iframe 的卸载事件，例如

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

and then remove the iframe from the parent window and reload a new iframe with new src when needed.然后从父窗口中删除 iframe，并在需要时使用新的 src 重新加载新的 iframe。

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

从 iFrame 卸载/删除内容

问题描述

12 个解决方案

解决方案1
32 已采纳 2009-08-21 02:08:15

解决方案2
8 2013-07-19 05:47:01

解决方案3
7 2015-11-12 23:43:54

解决方案4
4 2009-08-20 16:21:43

解决方案5
4 2014-01-10 17:14:28

解决方案6
3 2016-11-27 16:45:51

解决方案7
1 2014-02-10 04:48:06

解决方案8
1 2018-04-20 06:03:56

解决方案9
1 2011-06-10 07:55:42

解决方案10
0 2009-08-20 17:37:03

解决方案11
0 2013-03-12 05:01:12

解决方案12
0 2011-11-10 14:01:36

从 iFrame 卸载/删除内容

问题描述

12 个解决方案

解决方案1 32 已采纳 2009-08-21 02:08:15

解决方案2 8 2013-07-19 05:47:01

解决方案3 7 2015-11-12 23:43:54

解决方案4 4 2009-08-20 16:21:43

解决方案5 4 2014-01-10 17:14:28

解决方案6 3 2016-11-27 16:45:51

解决方案7 1 2014-02-10 04:48:06

解决方案8 1 2018-04-20 06:03:56

解决方案9 1 2011-06-10 07:55:42

解决方案10 0 2009-08-20 17:37:03

解决方案11 0 2013-03-12 05:01:12

解决方案12 0 2011-11-10 14:01:36

解决方案1
32 已采纳 2009-08-21 02:08:15

解决方案2
8 2013-07-19 05:47:01

解决方案3
7 2015-11-12 23:43:54

解决方案4
4 2009-08-20 16:21:43

解决方案5
4 2014-01-10 17:14:28

解决方案6
3 2016-11-27 16:45:51

解决方案7
1 2014-02-10 04:48:06

解决方案8
1 2018-04-20 06:03:56

解决方案9
1 2011-06-10 07:55:42

解决方案10
0 2009-08-20 17:37:03

解决方案11
0 2013-03-12 05:01:12

解决方案12
0 2011-11-10 14:01:36