如何深度克隆 iframe？答案

【问题标题】：How to deep clone iframe?如何深度克隆 iframe？
【发布时间】：2012-03-30 22:31:18
【问题描述】：

有没有办法深度克隆 iframe？

基本的 jQuery 克隆只是创建另一个具有相同 src 的 iframe。我想要实现的是一种克隆 iframe 的方法，它是准确的当前内容（即任何可能的输入值、通过 javascript 进行的任何 DOM 修改等）。

var clone = iframe.contents().find('html').clone();

当我克隆 HTML 属性及其所有子属性、修改等时，我遇到了这些问题：

我缺少 DOCTYPE
如何将其插入到新的 iFrame 中？

【问题讨论】：

丢失 DOCTYPE 应该没关系，AFAIK：这是给解析器的信号。由于您已经拥有 DOM 元素，因此不需要对其进行解析。

标签： javascript iframe

【解决方案1】：

如果你克隆iframe 创建另一个iframe 然后你深克隆你的iframe！它的来源在其他地方，当您分配其src 属性时，它将被下载。

测试

假设您有一个打印当前时间的（非缓存）页面作为源。在您的页面上放置一个iframe，等待 10 秒然后克隆它。新的iframe 将下载其内容，而第二个iframe 将具有不同的内容（时间）。

“真正的”深度克隆

编辑：如果您需要深度原始克隆，您可以获取 innerHTML 并将其注入 iframe 中。来自Michael Mahemof的解决方案：

// Creates the new iframe, add the iframe where you want
var newframe = document.createElement("iframe");
document.body.appendChild(newframe); 

// We need the iframe document object, different browsers different ways
var frameDocument = newFrame.document;
if (newFrame.contentDocument)
 frameDocument = newFrame.contentDocument;
else if (newFrame.contentWindow)
 frameDocument = newFrame.contentWindow.document;

// We open the document of the empty frame and we write desired content.
// originalHtmlContent is a string where you have the source iframe HTML content.
frameDocument.open();
frameDocument.writeln(originalHtmlContent);
frameDocument.close();

【讨论】：

我想要的是深度克隆 iFrame 及其内容，而不仅仅是设置相同的 src。在您的情况下，我想要另一个 iframe，它与原始 iframe 具有 same 时间。
添加了“真正的深度克隆”部分
这种方法的问题是它不会克隆动态元素，例如输入字段的值。
不，你没有。当然，如果你在 HTML 代码本身上设置它，然后你会得到它，但如果我只是在输入字段上键入一些内容并通过 innerHTML 克隆 iFrame，则该值不会被传输过来。但是，我可以为此使用克隆：InnerHTML 用于主 HTML，克隆用于正文。泰！ :)
这个今天真的帮助了我 - 谢谢。使用 open/write/close 是我缺少的关键。仅使用 innerHTML 是不工作。

【解决方案2】：

你不能克隆contents()：

var clone = iframe.contents().clone();

然后使用以下命令将其插入另一个框架：

iframe2.append(clone);

【讨论】：

问题是你不能克隆内容，你需要有一个你想要克隆的元素。只是纯粹添加/替换克隆的 html 元素会爆炸。 ://