JavaScript DOM: transfer element between frames

Question

I'm using the following jQuery code within an iframe (same origin) to try to move a node from the iframe to the main (top) document.

var dest = $(window.top.document).find('#dest_id');
dest.append($('#source_id'));

The following works ok:

window.top.document.getElementById('dest_id').innerHTML = document.getElementById('source_id').innerHTML;

I guess there is a limitation in moving DOM nodes between frames. Is there any way around this either in plain js or in jquery?

Edit: Could it be something to do with the ownerDocument property? I tried changing it to window.top.document on #dest_id but it didn't work.

Edit, similar question: Can't appendChild to a node created from another frame

Answer 1

It's a bad idea to attempt to move elements between frames, because there's no way you can enforce your user to only view the page attempting to send data in the context of an iframe - the user could choose to navigate directly to the page. Out of its original context, the page will just fail to work properly.

A much better solution is to make the child page write the data you want the parent page to receive into a database or some other kind of persistent session data, You could then use some kind of callback to signal the parent page the correct time to check the session data for your returned data. This is much neater, and doesn't rely on your pages being viewed in certain contexts.

Not a direct response to your question, I know. But there's my opinion :-)

Good luck!