I have a page with an iframe and would like to extract a DOM node from the child frame and put it on the parent page. This works in Firefox (3.5), but not in Internet Explorer (7).
I've broken down the code to the simplest I can.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
".dtd">
<html>
<head>
<title>Fragment</title>
</head>
<body>
<iframe src="blank.html"></iframe>
<script type="text/javascript">
window.onload = function () {
var fragment = document.createDocumentFragment();
var div = frames[0].document.createElement("div");
fragment.appendChild(div);
};
</script>
</body>
</html>
I get an error "Invalid argument" on the "fragment.appendChild(div);" line. The error seems to stem from the fact that I'm creating the document fragment from the iframe's document and the div element from the parent document. This code works if both use the same document.
I want to keep any events that might be attached to the DOM nodes, so I don't want to use innerHTML.
Anyone know a fix for this?
I have a page with an iframe and would like to extract a DOM node from the child frame and put it on the parent page. This works in Firefox (3.5), but not in Internet Explorer (7).
I've broken down the code to the simplest I can.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Fragment</title>
</head>
<body>
<iframe src="blank.html"></iframe>
<script type="text/javascript">
window.onload = function () {
var fragment = document.createDocumentFragment();
var div = frames[0].document.createElement("div");
fragment.appendChild(div);
};
</script>
</body>
</html>
I get an error "Invalid argument" on the "fragment.appendChild(div);" line. The error seems to stem from the fact that I'm creating the document fragment from the iframe's document and the div element from the parent document. This code works if both use the same document.
I want to keep any events that might be attached to the DOM nodes, so I don't want to use innerHTML.
Anyone know a fix for this?
Share Improve this question edited Feb 18, 2010 at 19:11 aakoch asked Feb 17, 2010 at 20:59 aakochaakoch 1,1741 gold badge9 silver badges18 bronze badges 2- I don't think you'll be able to fix this. – SLaks Commented Feb 17, 2010 at 21:05
- FYI, I found out that it works in IE8. – aakoch Commented Feb 17, 2010 at 21:23
3 Answers
Reset to default 4Your problem is that you are not adopting the nodes into the fragment that are created in the current document. Use either the following:
fragment.appendChild(fragment.ownerDocument.createElement("div"));
or
fragment.appendChild(fragment.ownerDocument.adoptNode(document.createElement("div"));
I'm just hazarding a guess here, but you could try creating the div using
var div = frames[0].document.createElement("div")
instead of
var div = document.createElement("div")
Using the main document's createElement() method may be why IE is having a problem.
I think I found the answer here: http://www.alistapart./articles/crossbrowserscripting/
Importing documents from two different ownerDocument properties ... requires the use of the DOM Level 2 method importNode(), since in these cases the DOM will not allow a simple document.appendChild().