How to deep clone iframe?

问题:

Is there any way to deep clone iframe?

Basic jQuery cloning just makes another iframe with the same src. What I want to achieve is a way to clone the iframe and it's exact current content (ie. any possible input values, any DOM modifications through javascript etc.).

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

When i clone the HTML attribute and all its children's, modifications etc I have these problems:

1. I'm missing the DOCTYPE

2. how do I insert it into the new iFrame?

回答1:

If you clone the iframe creating another iframe then you deep clone your iframe! It's source is somewhere else and it'll be downloaded when you assign its src attribute.

Test

Imagine you have as source a (non cached) page that prints the current time. Put an iframe on your page, wait 10 seconds then clone it. The new iframe will download its content and the 2nd iframe will have a different content (the time).

"Real" deep cloning

EDIT: if you need a deep raw clone you may get the innerHTML and inject it inside the iframe. Solution from 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();

回答2:

Can't you clone the contents():

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

and then insert it into another frame using:

iframe2.append(clone);