PDA

View Full Version : IFRAME CloneNode does not clone its contents?



jaktharkhan
07-27-2006, 06:48 PM
Hi,

I really really need help in trying to figure out how can I do a CloneNode on an Iframe where the cloned IFRAME clones with all its contents?. Basically what I am doing is dynamically building a table with Iframes inside it. The problem is I just want to build one Iframe because the contents of it can be very complex. After my Iframe is built I just want to clone the iframe as many times as I need later. I cannot use an HTML file and point the src of the Iframe to it. I have to put into the Iframe a very dynamic HTML document I get back form an Ajax call. This is truly the key of the problem. Since my pages can be complicated it can take around 2000ms to render. I don’t want to make each Iframe render every time when I already have the document ready to display. I just want to clone it very fast. I can not use the ‘scr’ of the iframe.


Here is a very simple example of my problem. Look near the end of the code to see the problem. Try this code and you can see the IFRAME does not Clone its contents. Is there any way around this problem? Please note that I also cannot use innerHTML to populate the cloned Iframe with my master Iframe’s contents. Because if I do this the page still takes 2000ms to render when the HTML in the Iframe is very complicated. I just want this thing to clone as it is. Thanks in advance.

<html>
<head>
</head>
<body>
<script language="JavaScript">

function getIFrame(frameName)
{
for (var i=0; i<frames.length; i++)
{
if (frames[i].name == frameName)
return frames[i];
}
return null;
}

// Create Table via DOM
var TABLETAG = document.createElement('TABLE');
TABLETAG.border = "1";

// Create Table body tag
var TBODYTAG=document.createElement('TBODY');
TABLETAG.appendChild(TBODYTAG);

// Create Table TR Tag
var TRTAG = document.createElement('TR');
TBODYTAG.appendChild(TRTAG);

// Create Table TD Tag
var TDTAG = document.createElement('TD');
TRTAG.appendChild(TDTAG);

// Append Table to Body
window.document.body.appendChild(TABLETAG);

// Create an Iframe
var MyIFrame = document.createElement('<iframe name="MyIframe">');
MyIFrame.setAttribute('width','100');
MyIFrame.setAttribute('height','100');
MyIFrame.setAttribute('src','about:blank');

// Append IFRAME To TD
TDTAG.appendChild(MyIFrame);

// Get acces to Iframe now attached ot body so
// I can add HTML code in it.
var MyIFrame = getIFrame('MyIframe');
MyIFrame.document.designMode='On';
MyIFrame.document.open();
MyIFrame.document.write("<div>f</div>");
MyIFrame.document.close();
MyIFrame.document.designMode='Off';

//**************************************
// ** Here is the problem. When the Table node
// is Cloned the IFrame does not clone its contnents.
// Help!!!!!***
//*************************************
TRTAG.appendChild(TDTAG.cloneNode(true));
TRTAG.appendChild(TDTAG.cloneNode(true));
TRTAG.appendChild(TDTAG.cloneNode(true));
TRTAG.appendChild(TDTAG.cloneNode(true));

</script>

</body>
</html>