window.openでwindowを再利用する時にそのtabに移動したい

この記事で分かること

Window.focus()メソッドの使い方

背景

window.open(url,_blank)で今までwindowを開いていたが、これだとタブが増えていく一方でした。
タブが増えていくとブラウザが重くなってしまいます。。

MDNによると単一のターゲット属性値を使用することでユーザリソースに優しい実装ができると記載されていました。

Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window, which is recycled.

window.open(url, "WINDOW_NAME")
これで実装しましたが、今度は今回の記事で取り扱う問題が起きました。
window.openしてもそのタブに移動してくれません。

そこでどうしたら良いのか調べてみました。

実装

前提

• window.open() で開く window の url は毎回変える使い方を想定
  window.open(url,'WINDOW_NAME')

Window.focus

https://developer.mozilla.org/en-US/docs/Web/API/Window/focus
ウィンドウを最前面にしてくれるそうです。

const openWindow = (url:string)=>{
    const windowObjRef = window.open(
                        url,
                        'WINDOW_NAME'
                    );
    windowObjRef!.focus();
}

window.openの呼び出し元のタブがリロードされない限り、windowObjRefには同じ参照値が保持され続けます。