javascript - How to deep clone iframe? - Stack Overflow

admin管理员组

文章数量:1332339

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?

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?

• javascript
• iframe

Share Improve this question Follow edited Mar 14, 2012 at 13:11 Andreas Louv 47.1k1313 gold badges107107 silver badges126126 bronze badges asked Mar 14, 2012 at 12:56 crappishcrappish 2,70844 gold badges2929 silver badges4242 bronze badges 1

• Missing the DOCTYPE shouldn't matter, AFAIK: it's a signal to the parser. Since you already have DOM elements, they shouldn't need to be parsed. – lonesomeday Commented Mar 14, 2012 at 13:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptHow to deep clone iframeStack Overflow