How deep is an iframe clone?

Question

Is there a way to deep clone an iframe?

Basic jQuery cloning only makes another iframe with the same src. What I want to achieve is a way to clone an iframe and the exact current content (i.e., any possible input values, any DOM modifications via javascript, etc.).

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

When I clone an HTML attribute and all its children, modifications, etc. I am having the following issues:

• I miss DOCTYPE

• How to insert it into a new iFrame?

Answer 1

If you clone an iframe by creating another iframe , you deeply clone your iframe ! This source is somewhere else, and it will be loaded when its src attribute is assigned.

Test

Imagine you have a source ( not cached ) that prints the current time. Put an iframe on your page, wait 10 seconds, then clone it. The new iframe will load its contents, and the second iframe will have different content (time).

"Real" deep cloning

EDIT : if you need a deep raw clone, you can get innerHTML and enter it in an iframe. Solution from Michael Mayhof :

 // 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(); 

Answer 2

Can you clone contents() :

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

and then paste it into another frame using:

 iframe2.append(clone);