【React】別タブが閉じたことを検知する【JavaScript】

はじめに

「外部サービスを別タブで開き、その別タブが閉じたことを元のタブで検知したい」
なんて時に使える方法をご紹介します。

タイトルにReactを入れておりますが、Vueとかでも使えます。

結論

sample.js

const url = "https://hogehoge.com" //任意の別タブのURL
const win = window.open(url, "_blank")
if (win) {
 const timer = setInterval(() => {
  if (win.closed) {
    window.clearInterval(timer);
    // 別タブ閉じた時にしたいこと
  }
}, 500);

簡単に解説

const win = window.open(url, "_blank")

定義したurlを別タブで開きます

 if (win.closed) {...}

Windowオブジェクトにあるclosedプロパティでウィンドウが閉じたかどうかを判定している。
参考：Window: closed property - Web APIs | MDN

setInterval(() => {...}, 500)

500ミリ秒が経過した後に、{...}を実行します。今回は500ミリ秒ごとにウィンドウが閉じているかの判定を行い、任意の処理を行なっている。
WindowOrWorkerGlobalScope.setInterval()

window.clearInterval(timer)

windowがclosedの場合、setIntervalを使用して設定された繰り返し動作をキャンセルします。
window.clearInterval

追記

@9447al 様より、clearIntervalを使用しない方法をコメント頂けました。
そちらもご参照ください！

##最後に

結構最近はグローバルオブジェクトを使う機会が多い。
JS、、奥が深いぜ、、、