如何在多個瀏覽器窗口中從現有頁面拆分DOM？

Question

我希望能夠從現有頁面獲取DOM結構，然后在不同的瀏覽器窗口中分隔某些元素。 這樣做時，我希望在每個瀏覽器窗口中保留相同的會話。 這可能嗎？ 如果是這樣，怎么會這樣做呢？

為了更清楚，這里是一個如何使用它的示例：

1）我登錄網站並創建會話。

2）該網站在頁面上有各種小部件。 我需要使用的一些小部件，有些則不然。 而不是通過CSS隱藏我不需要的那些，我寧願將我需要的那些提取到單獨的窗口中。 然后，我可以根據需要在我的桌面上安排這些單獨的小部件窗口。

有什么辦法嗎？ 謝謝。

Answer 1

我想在每個瀏覽器窗口中保留相同的會話。

DOM不會維護會話。 它們存在於cookie中，也可能是javascript狀態。

我希望能夠從現有頁面獲取DOM結構，然后在不同的瀏覽器窗口中分隔某些元素。

有兩個選項，DOM節點可以直接從一個文檔移植到adoptNode，但是需要在不同的javascript全局上下文之間直接訪問，這只能通過frames或window.opener獲得 ，即當一個窗口直接產生另一個窗口時。 請注意，這只會移動DOM節點，而不是任何與它們關聯的狀態或偵聽器。

另一種方法是將它們序列化為HTML或XML，並通過各種通信機制（如postMessage或通道）將序列化表單發送到另一個窗口。

既然你說小部件，我想有一些javascript與他們相關聯。 當你跨越窗口邊界​​移動DOM節點本身時，必須重寫javascript以跨越窗口邊界​​進行通信。

如果您的前端實現為MVC或類似模式，您應該將模型移動到不同的窗口並重新實現視圖而不是直接移動dom。

Answer 2

如果要在某個頁面中顯示不同的元素，也許您可​​以嘗試使用localStorage在一個瀏覽器上與不同的選項卡共享消息。 打開頁面時為其設置標識並保存到localStorage，每個頁面都會監聽localStorage的更改。 然后，您可以通過設置localStorage來共享設置來控制將在一個窗口上顯示的內容。

但是你的第二部分示例可能不是一個好主意，因為瀏覽器窗口有許多相同的部分，它們不能隱藏和無用，並且它們無法設置在頂部。 制作一個桌面應用程序可以解決這個問題，但在今天的Web開發人員通常在網頁中的方式，您可以移動或隱藏一些小部件。 所以你可以考慮這種方式或嘗試通過上述方式實現你的想法。

希望這可以在某種程度上幫助你。

Answer 3

您可以使用Multi Layout Manager for Chrome 。 這樣您就可以根據需要排列窗口並保存以供日后使用。 您可以使用Web套接字（WinRT或SignalR）在Windows之間進行同步和通信。

希望這可以幫助。