javascript - 如何跨多个浏览器窗口从现有页面拆分 DOM？

Question

我希望能够从现有页面获取 DOM 结构，然后在不同的浏览器窗口中分离某些元素。这样做时，我想在每个浏览器窗口中保留相同的 session 。这可能吗？如果是这样，人们会怎么做呢？

为了更加清楚，这里有一个如何使用它的例子:

1) 我登录网站并创建 session 。

2) 该网站的页面上有各种小部件。有些小部件我需要使用，有些我不需要。与其通过 CSS 隐藏我不需要的那些，不如将我确实需要的那些提取到单独的窗口中。然后我可以在我的桌面上随意排列这些单独的小部件窗口。

有什么办法吗？谢谢。

Answer 1

I’d like to retain the same session across each of these browser windows.

session 不是由 DOM 维护的。它们存在于 cookie 中，也可能存在于 javascript 状态中。

I’d like to be able to take the DOM structure from an existing page and then separate certain elements across different browser windows.

有两种选择，DOM节点可以直接从一个文档移植到via adoptNode但这需要在不同的 javascript 全局上下文之间进行直接访问，这只能通过框架或 window.opener 获得。 ，即当一个窗口直接生成另一个窗口时。请注意，这只是移动 DOM 节点，而不是任何状态或与之关联的监听器。

另一种方法是将它们序列化为 HTML 或 XML，然后通过各种通信机制(例如 postMessage 或 channel )将序列化形式发送到另一个窗口。

既然您说的是小部件，我猜它们与一些 javascript 相关联。必须重写该 javascript 才能以与跨窗口边界移动 DOM 节点本身类似的方式跨窗口边界进行通信。

如果您的前端是作为 MVC 或类似模式实现的，您应该将模型移动到不同的窗口并重新实现 View ，而不是直接移动 dom。