Question

无论如何要卸载已经加载到iframe中的页面？如果可能的话，我不想将iframe src更改为空白页面。我基本上正在寻找能做类似$('#frameID').attr("src","");之类的事情，除了代码似乎没有清除以前加载的页面。

我可以调用"unload"函数来重置iframe，以便它没有加载任何内容吗？

Answer 1

其他解决方案使用innerHTML，这在XHTML中并不总是有效。他们也只清除document.body（<head>中的任何内容仍然存在）。这是一个使用DOM的解决方案：

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

此解决方案使用innerHTML：

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

Answer 2

试试这个，

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

它只清除你标签里面的innerHTML，而不是实际卸载你的iframe，这样你就可以重用你的iframe而无需重新加载它，并且它可以在所有浏览器中工作，非常简单！

Answer 3

如果您动态生成iframe的内容，则所有加载的脚本/变量都会从一次写入泄漏到另一次。因此，@ Eli提供的清除dom元素的解决方案将无效。

简而言之：

要清理，请将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>

要清理：

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

详细说明：脚本泄漏演示

两个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();

如果您运行此代码，您会看到第二个iframe的输出为555，尽管它已在第一个iframe中定义。

如果取消注释中间部分，它将按预期工作。

相关问题：Avoiding memory leaks loading content into an iframe

Answer 4

$（ '＃frameID'）。contentWindow.document.body.innerHTML ='';

与任何iframe一样，只有当您在同一个域时才会有效。

Answer 5

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

这对我有用，也防止了内存泄漏。在我的情况下，我也必须摧毁父母。在这种情况下，您必须延迟销毁父级以防止内存泄漏

Answer 6

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

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

在http://www.livepage.info

上显示iframe新闻时遇到同样的问题

Answer 7

删除并重新创建iframe是这里最明智的解决方案（对其他答案没有冒犯）。

只删除iframe的innerHTML，不刷新存储的变量，绑定的eventListeners等。

小心这一点，它可能会导致很多问题（如内存泄漏，同一事件的多个触发器等）。

Answer 8

首先，获取框架的文档：

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

然后，将其删空：

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

我认为这也应该有效：

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

现在，您可能希望对可能在头部加载的任何脚本执行某些操作，但这应该可以帮助您入门。

Answer 9

您可以触发该iframe的卸载事件，如

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

然后从父窗口中删除iframe，并在需要时使用新的src重新加载新的iframe。

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

Answer 10

function getContentFromIframe(iFrameName)
{

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

//Do whatever you need with the content    

}

一定会有效!!!!!!!!!!!!!!!!

Answer 11

这对我有用，清除了iframe标签内的所有内容;身体，头部，HTML和所有：

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

Answer 12

如果您之前通过设置iframe的src属性加载了内容，则无法清空内容，因为它违反了跨站点脚本。

然后，您可以将src属性设置为''，这将使浏览器放弃整个内容。

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

从iFrame卸载/删除内容

12 个答案: