使用数据和事件将元素移动到iframe的父项

Question

这种情况。 我在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：我已经测试了内容在父级上移动时的反应，数据和事件已经消失。

Answer 1

它更多是评论，但不适合其中。

在不同文档之间移动DOM元素总是有点冒险。 因为它可能导致意外行为（内存泄漏，行为奇怪的元素）。 在当前的浏览器中，大多数时间都可以运行，但是我不建议这样做。

如果您使用jQuery，则会遇到另一个问题。 jQuery有一个缓存，用于存储分配给对象的有关data和event信息，该缓存与文档窗口一起存储。 有关更多详细信息，请阅读此答案，以解决另一个问题：

因此，如果您使用jQuery在不同文档之间移动元素，则当前您一方面会释放这些信息，另一方面可能会导致内存泄漏。

有了事件，事情变得更加复杂。 例如，如果您委托了事件，则可能会变得完全混乱。

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

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