Entry
How can I copy elements from one (i)frame to another?
How can I copy elements from one (i)frame to another?
Feb 20th, 2001 04:35
Martin Honnen,
NN6 has powerful DOM operations to copy elements and nodes, name
nodeObject.cloneNode(true)
which creates a deep copy of the node. It is also possible to clone a
node from a document in one window/frame and to insert the cloned node
into another frame/window's document.
IE5+ also provides cloneNode but for our task to copy elements or nodes
from frame to frame it doesn't help as IE5 and IE5.5 don't allow to
insert the node created in one window/frame document into another
window/frame's document. But as IE4+ has innerHTML and outerHTML
properties for elements and the powerful insertAdjacentHTML so that we
can use cloneNode and other DOM operations for NN6 and the HTML
operations for IE4.
So an example looks like
<HTML>
<HEAD>
<TITLE>
copying elements between frames
</TITLE>
<SCRIPT>
function loadFrame () {
var html = '';
html = '<HTML><BODY>';
html += '<TABLE ID="aTable" BORDER="1">';
for (var r = 0; r < 3; r++) {
html += '<TR>';
for (var c = 0; c < 5; c++)
html += '<TD>' + r + ', ' + c + ' Kibology<\/TD>';
html += '<\/TR>';
}
html += '<\/TABLE>';
html += '<\/HTML>';
with (window.iframe0.document) {
open();
write(html);
close();
}
}
function copyTable() {
if (document.all)
window.iframe1.document.body.insertAdjacentHTML('beforeEnd',
window.iframe0.document.all.aTable.outerHTML);
else if (document.getElementById && document.body.cloneNode) {
var table = window.iframe0.document.getElementById('aTable');
var tableCopy = table.cloneNode(true);
window.iframe1.document.body.appendChild(tableCopy);
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="loadFrame()">
<INPUT TYPE="button" VALUE="copy table"
ONCLICK="copyTable();"
>
<BR>
<IFRAME NAME="iframe0"
SRC="about:blank"
WIDTH="400" HEIGHT="150"
>
</IFRAME>
<BR>
<IFRAME NAME="iframe1" SRC="about:blank"
WIDTH="400" HEIGHT="150"
></IFRAME>
</BODY>
</HTML>
Note that you could of course load the original frame from an HTML
document; we only document.write the frame content to have a self
contained test case.
