#4059 closed bug (wontfix)

Opened February 04, 2009 09:16AM UTC

Closed April 01, 2011 02:31AM UTC

AppendTo not working under IE7 when select element from another frame.

Reported by:	fournaise	Owned by:
Priority:	low	Milestone:	1.next
Component:	manipulation	Version:	1.4.4
Keywords:		Cc:
Blocked by:		Blocking:

Description

Hello,

I have 2 frames; in bottom frame I select a element in the other frame and try to append the selected element to a existing element in the bottom frame.

Works under FF3, but failed in IE6 and IE7.

Hereafter the test :

--- index.html ---

<frameset rows="50%,50%" >
   <frame src="haut.html" name="haut" frameborder="yes">
   <frame src="bas.html" name="bas" frameborder="yes">
</frameset>

--- haut.html ----

<html><head></head>
<body>
<div class="classRecup">TEST</div>
</body>
</html>

--- bas.html ---

<html><head>
<script language="javascript" src="jquery-1.3.1.min.js"></script>
<script language="javascript">
$().ready(function() {
	$(".classRecup",parent.haut.document).appendTo("#divTitrePage");
});
</script>
</head>
<body><div id="divTitrePage" style="border:solid 1px blue">Mon texte :</div>
</body>
</html>

Attachments (0)

Change History (11)

Changed August 09, 2009 01:03AM UTC by dmethvin comment:1

component:	unfilled → core
priority:	major → minor

Changed February 16, 2010 10:14PM UTC by aakoch comment:2

I was able to reproduce this error in jQuery 1.3.2 and 1.4.1. The error is "htmlfile: Invalid argument." This sounds like the same issue encountered in bug #4348.

I have another example of this behavior between a parent document and a child document within an iframe.

parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Parent</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>

</head>

<body>
<iframe src="child.html" id="childIframe"></iframe>

<script type="text/javascript">
$("#childIframe").load(function () {
    var childElements = $(this).contents().find(".pullup");
    //childElements.appendTo("body");
    $("body").append(childElements);
});
</script>

</body>
</html>

child.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Child</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>

</head>

<body>

Child
<div class="pullup">Pull-up Element</div>
<div class="pushup">Push-up Element</div>

<script type="text/javascript">
$(".pullup").add(".pushup").mouseover(function () {
    $(this).append(".");
});
$(function () {
    var childElements = $(this).find(".pushup"),
        topBody = top.jQuery("body");
    //childElements.appendTo(topBody);
    topBody.append(childElements);
});
</script>

</body>
</html>

Both trying to pull the elements up from the parent and pushing the elements up from the child both fail in the "clean" method with the error "htmlfile: Invalid argument." in IE7. The code works fine in FF 3.5.

Here's part of the stack:

append
domManip
clean - line "fragment.appendChild( ret[i] );

Changed February 18, 2010 07:41PM UTC by aakoch comment:3

I believe the problem is because you cannot appendChild when the fragment and the element (ret[i] in this case) don't have the same ownerDocument. You have to use importNode or adoptNode and IE7 doesn't support these. I'm looking into a solution like the one found at http://www.alistapart.com/articles/crossbrowserscripting/.

More on my research can be found here: http://stackoverflow.com/questions/2284356/cant-appendchild-to-a-node-created-from-another-frame/2291553#2291553

Changed February 18, 2010 09:06PM UTC by aakoch comment:4

I was able to fix this by changing

fragment.appendChild( ret[i] );

on line 4500 to

if (document.adoptNode || fragment.ownerDocument == ret[i].ownerDocument) {
    fragment.appendChild( ret[i] );
}
else {
    fragment.appendChild(_importNode(fragment, ret[i], true ));
    ret[i].parentNode.removeChild(ret[i]);
}

and adding this function

_importNode = function(document, node, allChildren) {
	/* find the node type to import */
	switch (node.nodeType) {
		case 1:
			/* create a new element */
			var newNode = document.createElement(node.nodeName);
			/* does the node have any attributes to add? */
			if (node.attributes && node.attributes.length > 0)
				/* add all of the attributes */
				for (var i = 0, il = node.attributes.length; i < il;)
					newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i++].nodeName));
			/* are we going after children too, and does the node have any? */
			if (allChildren && node.childNodes && node.childNodes.length > 0)
				/* recursively get all of the child nodes */
				for (var i = 0, il = node.childNodes.length; i < il;)
					newNode.appendChild(_importNode(document, node.childNodes[i++], allChildren));
			return newNode;
			break;
		case 3:
		case 4:
		case 8:
			return document.createTextNode(node.nodeValue);
			break;
	}
};

Changed June 20, 2010 08:15PM UTC by dmethvin comment:5

component:	core → manipulation

Changed October 29, 2010 06:59PM UTC by snover comment:6

#6840 is a duplicate of this ticket.

Changed October 29, 2010 07:01PM UTC by snover comment:7

keywords:	→ needsreview bikeshed
milestone:	1.3.2
priority:	minor → low
version:	1.3.1 → 1.4.3

Changed January 19, 2011 04:46PM UTC by jitter comment:8

#2253 is a duplicate of this ticket.

Changed January 19, 2011 04:48PM UTC by jitter comment:9

description:	Hello, \ I have 2 frames; in bottom frame I select a element in the other frame and try to append the selected element to a existing element in the bottom frame. \ Works under FF3, but failed in IE6 and IE7. \ \ Hereafter the test : \ \ --- index.html --- \ \ <frameset rows="50%,50%" > \ <frame src="haut.html" name="haut" frameborder="yes"> \ <frame src="bas.html" name="bas" frameborder="yes"> \ </frameset> \ \ \ --- haut.html ---- \ \ <html><head></head> \ <body> \ <div class="classRecup">TEST</div> \ </body> \ </html> \ \ --- bas.html --- \ \ <html><head> \ <script language="javascript" src="jquery-1.3.1.min.js"></script> \ <script language="javascript"> \ $().ready(function() { \ $(".classRecup",parent.haut.document).appendTo("#divTitrePage"); \ }); \ </script> \ </head> \ <body><div id="divTitrePage" style="border:solid 1px blue">Mon texte :</div> \ </body> \ </html> → Hello, \ I have 2 frames; in bottom frame I select a element in the other frame and try to append the selected element to a existing element in the bottom frame. \ Works under FF3, but failed in IE6 and IE7. \ \ Hereafter the test : \ \ --- index.html --- \ {{{ \ <frameset rows="50%,50%" > \ <frame src="haut.html" name="haut" frameborder="yes"> \ <frame src="bas.html" name="bas" frameborder="yes"> \ </frameset> \ }}} \ \ --- haut.html ---- \ {{{ \ <html><head></head> \ <body> \ <div class="classRecup">TEST</div> \ </body> \ </html> \ }}} \ --- bas.html --- \ {{{ \ <html><head> \ <script language="javascript" src="jquery-1.3.1.min.js"></script> \ <script language="javascript"> \ $().ready(function() { \ $(".classRecup",parent.haut.document).appendTo("#divTitrePage"); \ }); \ </script> \ </head> \ <body><div id="divTitrePage" style="border:solid 1px blue">Mon texte :</div> \ </body> \ </html> \ }}}
milestone:	→ 1.next
version:	1.4.3 → 1.4.4

Changed January 19, 2011 04:51PM UTC by jitter comment:10

_comment0:	#8010 is a duplicate of this ticket. → 1295455901076075

#8010 is a duplicate of this ticket.

#8010 holds additional http://jsfiddle.net test cases

Changed April 01, 2011 02:31AM UTC by dmethvin comment:11

keywords:	needsreview bikeshed
resolution:	→ wontfix
status:	new → closed

There are many other issues with trying to manipulate elements across a frame boundary, including memory leaks and security issues if the frame navigates to a different domain. Perhaps someone could write a plugin to do this safely?

Side navigation