从 iFrame 中卸载/删除内容
Posted
技术标签:
【中文标题】从 iFrame 中卸载/删除内容【英文标题】：Unloading/Removing content from an iFrame 【发布时间】：2010-11-21 09:15:49 【问题描述】：是否有卸载已在 iframe 中加载的页面？如果可能，我不想将 iframe src 更改为空白页。我基本上是在寻找可以做类似$('#frameID').attr("src",""); 的事情，除了代码似乎没有清除以前加载的页面。
我是否可以调用 "unload" 函数来重置 iframe，使其内部不加载任何内容？
【问题讨论】：
你可以删除并创建一个新的 iframe。$("#frameID").attr("src", "") 在 Firefox 11 上对我来说工作得很好。如果你真的想要一个空白 iframe，你可能还想尝试将 src 设置为 about:blank 而不是空字符串。
@IlmariKaronen about:blank 创造奇迹！！！
【参考方案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 = "";
【讨论】：
很好的解决方案，非常感谢！ 正如AJ Ostergaard 在edit suggestion 中指出的那样，这仅在iframe 与主页位于同一域中时才有效。我因为放错了位置而拒绝了编辑，但他的观点仍然正确且值得一提。 @EliGrey 这非常适合卸载（第一个，非innerHTML，解决方案），但是一旦我从 iframe 中卸载了内容，我就无法通过设置 src 重新加载任何内容... iframe 保持空白。完成此操作后，如何重用 iframe？【参考方案2】：试试这个，
$("iframe").contents().find("body").html('');
它只会清除内部标签的 innerHTML 而不会真正卸载 iframe，因此您可以重复使用 iframe 而无需重新加载它，并且它可以在所有浏览器中工作，而且非常简单！！
【讨论】：
但这只有在 iframe 从同一个域加载时才有效，对吧？【参考方案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
【讨论】：
感谢您的解决方案。有没有不移除 iframe 的替代方案？ 你为我节省了年月日。太感谢了。奇迹般有效。这应该是 imo 接受的答案。【参考方案4】：$('#frameID').contentWindow.document.body.innerHTML ='';
与任何 iframe 一样，这仅在您位于同一域中时才有效。
【讨论】：
【参考方案5】：删除并重新创建 iframe 是这里最安全的解决方案。
通过仅删除 iframe 的 innerHTML，您不会刷新存储的变量、绑定的 eventListener 等。
注意这一点，它可能会导致很多问题（如内存泄漏、同一事件的多个触发器等）。
【讨论】：
【参考方案6】：var frame = document.getElementById("myframe");
frame.src = "about:blank";
这对我有用，也防止了内存泄漏。 就我而言，我也必须摧毁父母。在这种情况下，您必须延迟销毁父级以防止内存泄漏
【讨论】：
“parent”是指父页面，还是 DOM 中包含 IFRAME 标记的父元素？ 包含 iframe 的父元素【参考方案7】：$("#frameId").contents().find("div#SomeDIVinsideFrame").remove(); // removes some div content inside iframe
$("#FrameId").remove(); // removes frame
在http://www.livepage.info 上显示 iframe 新闻时遇到同样的问题
【讨论】：
【参考方案8】：这对我有用，清除了 iframe 标记中的所有内容；正文、头部、html 和所有内容：
$("iframe").contents().empty();
【讨论】：
【参考方案9】：如果您之前通过设置 iframe 的 src 属性加载了内容，则无法清空该内容，因为这违反了跨站点脚本。
然后您可以将src 属性设置为''，这将使浏览器丢弃整个内容。
$('iframe').prop('src', '');
【讨论】：
【参考方案10】：首先，获取框架的文档：
var frame = $('#frameId').get(0);
var frameDoc = frame.contentDocument || frame.contentWindow.document;
然后，将其空白：
frameDoc.getElementsByTagName('body')[0].innerHTML = "";
我认为这也应该有效：
$('body', frameDoc).html("");
现在，您可能想要对可能加载到头部的任何脚本执行一些操作，但这应该可以帮助您开始。
【讨论】：
【参考方案11】：您可以触发该 iframe 的卸载事件，例如
$('body').trigger('unload');
然后从父窗口中删除 iframe，并在需要时重新加载带有新 src 的新 iframe。
$('#iframe_wrapper').html('');
$('#iframe_wrapper').html('<iframe src="...">');
【讨论】：
【参考方案12】：function getContentFromIframe(iFrameName)
var myIFrame = document.getElementById(iFrameName);
var content = myIFrame.contentWindow.document.body.innerHTML;
//Do whatever you need with the content
一定会成功的！！！！！！！！！！！！！！！！
【讨论】：
以上是关于从 iFrame 中卸载/删除内容的主要内容，如果未能解决你的问题，请参考以下文章
Colorbox - 在颜色框内容中删除自定义 iframe 时防止父页面重新加载？