如何在多个浏览器窗口中从现有页面拆分DOM？

Question

I'd like to be able to take the DOM structure from an existing page and then separate certain elements across different browser windows. When doing so, I'd like to retain the same session across each of these browser windows. Is this possible? And if so, how would one go about doing this?

To give more clarity, here's an example of how this would be used:

1) I login to a site and create the session.

2) The site has various widgets on the page. Some of the widgets I need to use, some I do not. Instead of hiding the ones I don't need via CSS, I'd rather extract the ones I do need into separate windows. Then I could arrange those individual widget windows across my desktop as much as I want.

Any way to do this? Thanks.

Answer 1

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

Sessions are not maintained by the DOM. They exist in cookies and maybe javascript state.

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

There are two options, DOM nodes can be directly transplanted from one document to via adoptNode but that requires direct access between the different javascript global contexts, which is only available via frames or window.opener , ie when one window directly spawned the other. Note that this just moves DOM nodes, not any state or listeners associated with them.

The alternative is serializing them to HTML or XML and sending the serialized form to another window via various communication mechanisms such as postMessage or channels.

Since you say widgets I guess there is some javascript associated with them. That javascript will have to be rewritten to communicate across window boundaries in a similar fashion as you move the DOM nodes themselves across window boundaries.

If your frontend is implemented as MVC or similar patterns you should just move the model to a different window and rematerialize the view instead of moving the dom directly.

Answer 2

If you want display different elements among some page, maybe you could try to use localStorage to share message with different tabs on one browser. When a page is opened set an identity for it and save to localStorage, and every page listen to the change of localStorage. Then you could control what will be displayed on one window by set localStorage to share settings.

But your second part of example may not a good idea because a browser window have many same part, them can not be hide and useless and them could not be set on the top. Make a desktop app would fix this problem but in today web developer ways normally in a webpage you could move or hide some widgets. So you could think about this way or try to achieve your thoughts by above way.

Hope this can help you in some way.

Answer 3

You can use Multi Layout Manager for Chrome . This way you can arrange your windows as you like and save them for later usage. You can use web sockets (WinRT or SignalR) to sync and communicate among windows.

Hope this helps.