How to split the DOM from an existing page across multiple browser windows?

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, i.e. 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.