javascript - 怎麼切換到之前用window.open開啟的window但不刷新該window?

Question

專案中遇到這樣一個問題。
parent window中用window.open(location.href, projectId)新開了一個以projectId作為window.name的視窗。
然後在parent window中想直接根據projectId切換到已開啟的對應的window，但不刷新該window。

直接用window.open(location.href, projectId)會切換到對應的window，但會刷新頁面，有什麼辦法只切換不刷新？

Answer 1

用變數保存window.open的回傳值，其回傳值就是那個視窗的 window 对象，执行 focus 方法即可。

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

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

Answer 2

使用html5的history相关API

history.pushState()

history. popstate事件等等

相關內容詳細請參考操縱瀏覽器的歷史記錄MDN

Answer 3

假設A window開啟了B window，B window開啟了C window，A擁有對B的引用， B擁有對C的引用。
這時候在A window跳轉B，或是B window跳轉C都可以用window.focus()直接實作。
但A window中想要跳轉C，查了各種API暫時沒發現怎麼透過window.name直接取得對應window物件的。試了下localstorage也沒辦法存window物件。這種情況有點麻煩。
想了下如果一定要實現，辦法應該是有的。大致上是利用localStorage來保存整棵樹結構，根節點是第一次打開的A，A的子節點是B，B的子節點是C。這樣所有視窗都能有辦法最終找到擁有最後要跳轉window的擁有者，然後透過postMessage一層層通知到那個window的擁有者，讓他去觸發目標window.focus()方法
但這樣子，項目多切換次數樹結構就會變得有點複雜，一層層通訊開銷估計也不小。如果瀏覽器有根據window.name取得window物件的方法就方便多了。