window.openで開いたウィンドウの状態監視

window.openで別ウィンドウを開いたときに、そのウィンドウの開閉を監視しようとしたら少しハマりました。

シンプルにやろうとする→失敗

まずは、unloadイベントで検出しようとしました。

失敗例

const w = window.open('/path/to/somewhere');
w.addEventListener('unload', () => {
  console.log('unload');
}, false);

このようにすると、ウィンドウは開いたままでもunloadが出力されてしまいます。

どうしてこうなった？

じつは、window.openを実行した場合、いったんabout:blankが開いて、それを指定のパスに置き換える、という形で処理が進んでいきます。そして、about:blankを上書きする際にunloadイベントが発生してしまうのです。

じゃあ、どうしようか

タイマーで監視する

window.closedというプロパティがありますので、タイマーでこの変化を監視するような方法も考えられます。

タイマー

const w = window.open('/path/to/somewhere');
const timer = setInterval(() => {
  if(!w.closed) return;
  clearInterval(timer);
  console.log('closed');
}, 100);

半ば無理やりな方法ですが、この方法の利点としてクロスドメインでも使えるということがあります（同一生成元でない場合、w.addEventListenerを行うことはできません）。

unloadイベントでチェック

1回目のunloadは、location.hrefがabout:blankで発生しますので、それをチェックする方法も考えられます。

const w = window.open('/path/to/somewhere');
w.addEventListener('unload', () => {
  if(w.location.href==='about:blank') return;
  console.log('unload');
}, false);

ただし、この方法の欠点として、指定されたページが表示される前にページを閉じてしまうと、about:blankのままでunloadイベントが発生するため、そちらと区別がつかない、ということがあります。

• ページの読み込み前に閉じた場合→about:blankでunload（終わり）
• ページの読み込み後に閉じた場合→about:blankでunload→本来のページでunload

ということで、ページが開く前の検知は、タイマーで監視するのがいちばんわかりやすい、という印象です。