javascript - How to switch to a window previously opened with window.open without refreshing the window?

Question

I encountered such a problem in the project.
Use window.open(location.href, projectId) in the parent window to open a new window with projectId as window.name.
Then in the parent window, I want to switch directly to the corresponding opened window based on the projectId, but without refreshing the window.

Using window.open(location.href, projectId) directly will switch to the corresponding window, but the page will be refreshed. Is there any way to only switch without refreshing?

Answer 1

Use a variable to save the return value of window.open, and the return value is the window 对象，执行 focus method of that window.

win1 = window.open(url1);
win2 = window.open(url2);

// 后续用 win1 这个引用执行 focus 方法
if (!win1.closed) {
  win1.focus();
}

Answer 2

Use html5的history相关API

history.pushState()

history. popstateEvents and more

For related content, please refer to the history record of the browser MDN

Answer 3

Suppose A window opens B window, B window opens C window, A has a reference to B, and B has a reference to C.
At this time, jumping from A window to B, or jumping from B window to C can be directly implemented using window.focus().
But I want to jump to C in window A. After checking various APIs, I haven’t found how to directly obtain the corresponding window object through window.name. I tried localstorage but couldn't save the window object. This situation is a bit troublesome.
After thinking about it, if it must be realized, there should be a way. Roughly, localStorage is used to save the entire tree structure. The root node is A when it is opened for the first time, the child node of A is B, and the child node of B is C. In this way, all windows can finally find the owner of the last window to be jumped, and then notify the owner of that window layer by layer through postMessage, allowing him to trigger the target window.focus() method
But this way, the project The tree structure will become a bit complicated if the number of switching times is high, and the communication overhead of each layer is estimated to be quite high. It would be much more convenient if the browser had a method to obtain the window object based on window.name.