将元素从一个 DOM 移动到另一个 DOM答案

【问题标题】：Moving an element from one DOM to another DOM将元素从一个 DOM 移动到另一个 DOM
【发布时间】：2013-07-20 05:25:26
【问题描述】：

这是一个巨大的远景，但无论如何我都会尝试 :-) 假设在 Chrome 扩展中我有两个页面（例如，选项页面和弹出页面）并且我想在它们之间移动一个 DOM 对象（例如，一个播放 YouTube 电影的 iframe）。有什么办法吗？

【问题讨论】：

100% 你可以像字符串一样传递它
您无法移动 iframe 而不会丢失其状态，即使在同一页面内也是如此。 YouTube 播放器是用来播放视频的，还是仅仅用作音频播放器？
youtube-in-an-iframe 就是一个例子。我的整个背景是完全不同的。我的实际需要是传递一个 webview，它可以将 youtube 视频从一个页面播放到另一个页面。 @RobW，如果是音频播放器，我会把它放在后台页面中。
@EldadMor 如果元素是简单的节点，那么您可以轻松地在弹出页面和选项页面之间转移节点。但是，由于您的代码涉及插件（用于 YouTube 视频的 Flash），因此该选项不会产生所需的结果，因为插件/iframe/嵌入的任何内容在文档内/跨文档移动时都会重新加载。
@RobW - 谢谢，我也这么想。无赖:)

【解决方案1】：

你可以通过

获取内部htlm

saved_html = dom_node.innerHTML

将 dom 节点作为字符串，您可以将其保存在 localStorage 或 cookie 中（不确定哪个适用于 chrome 扩展）。在另一个页面，您将其加载到容器中：

container.innerHTML = saved_html

注意：状态不会被保存，所以如果你播放视频，它仍然会在其他网站上暂停。如果 iframe 不在您的域中，您也无法访问它的 innerHTML。

【讨论】：

是的，这是序列化和反序列化元素的众多方法之一，但这不是我想要的。我正在寻找一种方法来获取元素并将其移动到不同的 DOM（顺便说一句，两个 DOM 都在同一个域上），同时使其行为与以前完全相同。