Cloning iframe with content generated by JS

[blackwolf]

When cloning element (clone() and inserting result with any posible method into the document) containing iframe with generated content (iframe has no src atribute and it’s content is generated by javascript), content of iframe’s body element is inserted into the old one, not new one. So I end up with empty new iframe and old iframe with duplicated content.

If the cloning operation is performed again on newly created element, original content of original (first) iframe is inserted in it again, so it contains three same elements. It looks like jQuery copy iframe content correctly, but inserts it's content into wrong iframe (original one, not new one).

I tested it with jQuery 1.3.2 and 1.4.1 and on Firefox 3.5.7, IE 8.0.6001 and Opera 9.64 – behavior is the same.

Code to reproduce the bug:

$(function(){

var insertCode = $('<div class="test_code"><p>Some content</p> <iframe width="400" height="50"></iframe><p>some other content</p><a href="#">Clone</a></div>').appendTo('body'); $('iframe', insertCode).load(function(){

$('iframe', insertCode).contents().find('body').append('<strong>Test</strong> test test');

}); $('a', insertCode).click(function(){

$(this).closest('.test_code').clone(true).appendTo('body'); return false;

});

});

[john]

That's because you're calling .load() on an iframe. .load() will grab the HTML and insert it in, I suspect that you may want to use a different method in that case.