使用数据和事件将元素移动到iframe的父级(Move elements to iframe's parent with data and events)

使用数据和事件将元素移动到iframe的父级(Move elements to iframe's parent with data and events)

这就是情况。 我在iframe中有一个复杂的UI，用户可以在提交之前执行多个操作。 在此过程中，用户可以切换到另一个页面（在iframe中）并返回。 这意味着iframe中有2个回发。

显然，我不希望用户丢失所有内容，但由于所有操作都是在客户端完成的，因此我无法从服务器重新加载以前的状态。

所以现在，我正在尝试将第一页内容移动到iframe父级，并在我们回来时将其重新放回原位。 我已经走了一半，因为元素显示在页面中但是它们丢失了数据属性和事件处理程序。

我正在使用它来移动父母的内容：

$("#resp").clone(true).attr("id", "refillResp").appendTo(window.top.$("#global"));

这要归还：

window.top.$("#global").find("#refillResp").clone(true).attr("id", "resp").appendTo($("#tdResp"));

有没有人知道这样做的方法？ PS：我已经测试了内容在简单地移动到父级时的反应，数据和事件已经消失。

this is the situation. I have a complex UI inside an iframe in which a user can perform several actions before submitting. During the process, the user can switch to another page (in the iframe) and come back. That means 2 postbacks inside the iframe.

Obviously, I don't want the user to lose everything but since all the actions have been done on the client-side, I can't reload the previous state from the server.

So now, I'm trying to move the first page content to the iframe parent and put it back in place when we come back. I'm half way there since the elements show back in the page but they lose their data attributes and event handlers.

I'm using this to move the content on the parent :

$("#resp").clone(true).attr("id", "refillResp").appendTo(window.top.$("#global"));

And this to put it back :

window.top.$("#global").find("#refillResp").clone(true).attr("id", "resp").appendTo($("#tdResp"));

Is there anyone who knows a way to do this ? PS: I've tested how the content react when simply moved on the parent and data and events are already gone.

最满意答案

这是一个评论，但它不适合那里。

围绕不同文档移动DOM元素总是有点冒险。 因为它可能导致意外行为（内存泄漏，行为奇怪的元素）。 在目前的浏览器中，它大部分时间都有效，但我不推荐它。

如果你使用jQuery，你还有另一个问题。 jQuery有一个缓存，用于存储有关分配给Object的data和event信息，该缓存与文档窗口一起存储。 有关详细信息，请阅读此答案，另一个问题：

如何在iFrame body标签上设置jQuery data（）并从iFrame中检索它？

因此，如果您在不同文档之间移动带有jQuery的元素，那么您目前一方面会松散这些信息，另一方面它可能导致内存泄漏。

随着事件，它更加复杂。 例如，如果你有委托事件，它可能会变得非常混乱。

如果您需要在iframe和parent之间交换数据，您应该考虑其他一些逻辑。

我在对我的另一个答案的评论中也提到了这一点，在这里我提到了这篇文章： 如何在iFrame body标签上设置jQuery data（）并从iFrame内部检索它？

It is more a comment, but it does not fit in there.

Moving DOM element around different documents around is alway a little bit risky. Because it could lead to unexpected behavior (memory leaks, elements that behave strange). In current browsers it most of the time works, but i would not recommend it.

If you use jQuery you have another problem. jQuery has a cache for storing informations about data and event that are assigned to an Object, this cache is stored with the documents window. For further details please read this answer, to another question:

How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?

So if you move element with jQuery between different document, you will currently on the one hand loose these informations, on the other hand it could result in memory leaks.

With events it is even more complicate. e.g. if you have delegated events it could be become completely messy.

If you need to exchange data between iframe and parent you should think of some other logic.

I also mention this in a comment to the other answer of me, where i referred to this post: How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?