Is it possible to pass a DOM node from an iframe to the parent in IE?

L

Logos

I'm having trouble with this in IE; annoyingly it works beautifully in
FF. My keywords are not specific enough to narrow my search to useful
entries on google, way too many hits, so here I am again.

What I want is to take an element from an inline frame and transfer it
to the parent for insertion into the parent document for display. This
works just fine in FF, but of course craps out in IE. Does anyone know
if there is a way to do this?

Code in parent:
function appendMe(node) {
node.style.background='red';
var here =document.getElementById("divInfoBar");
here.appendChild(node);
}

Code in iframe, launched via onload:
function fuggoff() {
var bugger =document.getElementById("test");
parent.appendMe(bugger);
}

Demo at http://65.110.86.247/Product_List3.asp. It is supposed to pass
a DIV out of the iframe, turn the background red (that works fine) and
then append it to the parent's DOM (which should automatically decouple
it from the iframe's DOM). The IE error message is "Error: invalid
argument" for here.appendChild(node).

Tyler
 
L

Logos

PS: creating a new node and copying the innerHTML seems to work, but
it doesn't grab anything set programmatically, dammit... For instance,
if I set the passed node' background to red, then copy innerhtml to a
new node and append it to the parent document, the appended node isn't
red.

Tyler
 
M

Martin Honnen

Logos wrote:

What I want is to take an element from an inline frame and transfer it
to the parent for insertion into the parent document for display. This
works just fine in FF, but of course craps out in IE. Does anyone know
if there is a way to do this?
Click to expand...

The proper way to do that is to use the W3C DOM Level 2 method
importNode e.g. you would do
function appendMe(node) {
node.style.background='red';
var here =document.getElementById("divInfoBar");
here.appendChild(node);
Click to expand...

here.appendChild(here.ownerDocument.importNode(node, true));

Mozilla and Opera (8 and later) support importNode, only Opera 8
requires it (as the W3C DOM suggests). The importNode works like a
cloneNode, only that it allows you to clone a node to be inserted in a
new owner document. So depending on your aims you would also need to
remove the node you have cloned from the other document e.g.
node.parentNode.removeChild(node)

IE is too old to support anything like W3C DOM Level 2 and has also no
own comparable APIs on nodes, you would be forced to go back to the more
IE 4 like "HTML string" insertion stuff e.g.
here.insertAdjacentHTML(
'beforeEnd',
node.outerHTML
);

W3C DOM Level 3 Core also has an adoptNode method that allows you to
move (not clone) a node from one document to another. I think Opera 9
supports that so there you could do e.g.
here.appendChild(here.ownerDocument.adoptNode(node));
 
L

Logos

IE is too old to support anything like W3C DOM Level 2 and has also no
own comparable APIs on nodes, you would be forced to go back to the more
IE 4 like "HTML string" insertion stuff e.g.
here.insertAdjacentHTML(
'beforeEnd',
node.outerHTML
);
Click to expand...

Bummer. So it's not possible then. I also tried iterating thru all
the properties of the iframe node use a for loop to copy them to the
new node, but it errors out after copying just two properties! Very
annoying :(

Tyler
 
B

BootNic

Logos said:
Bummer. So it's not possible then. I also tried iterating thru all
the properties of the iframe node use a for loop to copy them to the
new node, but it errors out after copying just two properties! Very
annoying :(
Click to expand...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function iframeImportNode(frameID,nodeID){
var frame,myNode,nod,fdiv;
if(!(document.body.innerHTML&&
document.cloneNode&&
document.getElementById&&
document.createElement&&
window.frames))
{
window.location="http://www.opera.com";
alert('Upgrade Required');
return document.body;
}
frame=window.frames[frameID];
myNode=frame.document.getElementById(nodeID);
nod=document.createElement('div');
fdiv=frame.document.createElement('div');
fdiv.appendChild(myNode.cloneNode(true));
nod.innerHTML=fdiv.innerHTML;
return nod.firstChild;
}
function point(){
window.frames['ifrm'].document.write('<p id="myP" style="color:blue;'+
'cursor:pointer;text-decoration:underline;" onclick="alert(\'done\')">'+
'blank page</p>');
window.frames['ifrm'].document.close();
}
flo=(window.attachEvent)?window.attachEvent('onload', point):
window.addEventListener("load", point, false);
</script>
<title>iframeImportNode</title>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
</head>
<body>
<div id="pannel1">
<iframe id="ifrm" name="ifrm" src="about:blank"></iframe>
</div>
<button
onclick="document.body.appendChild(iframeImportNode('ifrm','myP'))">
Insert node from Iframe</button>
</body>
</html>

--
BootNic Friday, June 30, 2006 7:19 PM

When I was young, I was put in a school for retarded kids for two
years before they realized I actually had a hearing loss...and they
called ME slow!
*Kathy Buckley*
 
L

Logos

Cool! Doesn't work on IE5.5 tho...trying to decide if I should support
the 4% of the people who visit using IE5 or not...tempting to just say
screw 'em...

Tyler
Bummer. So it's not possible then. I also tried iterating thru all
the properties of the iframe node use a for loop to copy them to the
new node, but it errors out after copying just two properties! Very
annoying :(
Click to expand...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function iframeImportNode(frameID,nodeID){
var frame,myNode,nod,fdiv;
if(!(document.body.innerHTML&&
document.cloneNode&&
document.getElementById&&
document.createElement&&
window.frames))
{
window.location="http://www.opera.com";
alert('Upgrade Required');
return document.body;
}
frame=window.frames[frameID];
myNode=frame.document.getElementById(nodeID);
nod=document.createElement('div');
fdiv=frame.document.createElement('div');
fdiv.appendChild(myNode.cloneNode(true));
nod.innerHTML=fdiv.innerHTML;
return nod.firstChild;
}
function point(){
window.frames['ifrm'].document.write('<p id="myP" style="color:blue;'+
'cursor:pointer;text-decoration:underline;" onclick="alert(\'done\')">'+
'blank page</p>');
window.frames['ifrm'].document.close();
}
flo=(window.attachEvent)?window.attachEvent('onload', point):
window.addEventListener("load", point, false);
</script>
<title>iframeImportNode</title>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
</head>
<body>
<div id="pannel1">
<iframe id="ifrm" name="ifrm" src="about:blank"></iframe>
</div>
<button
onclick="document.body.appendChild(iframeImportNode('ifrm','myP'))">
Insert node from Iframe</button>
</body>
</html>

--
BootNic Friday, June 30, 2006 7:19 PM

When I was young, I was put in a school for retarded kids for two
years before they realized I actually had a hearing loss...and they
called ME slow!
*Kathy Buckley*
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Is it possible an iframe can overlapp another? 3
Trying to add text into an editable div that is in an iframe 0
How does a HEAD pointer end up pointing to the first node in a linked list? 3
I am trying to make an auto-play thing. How do I make it work? 5
How to get the html elements of Iframe from the Parent page byjavascript 1
Insertion of a targeted IFRAME under IE 3
iframe loading problem in IE 7
onclick and DOM in parent window problem 4

Members online

No members online now.
Total: 65 (members: 1, guests: 64)
Robots: 447

Forum statistics

Threads
473,989
Messages
2,570,207
Members
46,783
Latest member
RickeyDort

Latest Threads

Top