ブラウザで別タブ・別ウィンドウを開いたことを検知する方法

前置き

今やっている案件（既存ECサイトのリプレイス）で実装した機能に

• ユーザがブラウザで別タブ・別ウィンドウを開いて商品を検索
• 各タブ・各ウィンドウでの検索条件を維持 （つまりそれぞれの画面でのセッションを維持）
• 今の画面の複製も同様に維持

というものがある。今回は、これをどう実装したかっていう話。 ただセッションの維持の方法は書かず、別タブ・別ウィンドウを開いたことを検知する部分の方法（というかTips）のみ。

※2016/09/15 追記

補足内容をこちらの記事に書いてますので、合わせてご参照下さい！
続・ブラウザで別タブ・別ウィンドウを開いたことを検知する方法の問題点

実装方針

• 画面操作での制御なのでJavaScriptで実装
• 新しいタブ・画面を開いたことをonfocusイベントで検知
• 別のタブ・画面に移ったことをonblurイベントで検知

厳密には別タブ・別ウィンドウを開いたことを検知しているのではなく、今focusされている画面を検知して処理をする形。 なので、別タブでなくてもfocusされれば必ず実行されるので、その辺を考慮する必要がある。

後はそれぞれのイベントのコールバック関数内で処理を書けばいい。

検知部分のコード

以下の例ではjQueryを使っているが、素のJavaScriptならwindow.onblur(function(){})で実装できる。

$(window).on('blur', function() {
   // 今開いていない画面の処理
});

$(window).on('focus', function() {
   // 別のタブ・画面を開いた時の処理
});

余談

最初はこれをどう実装するか結構悩んだが、ググッてみたらこの方法が出てきて感動したのを覚えている。 確かに入力フォームなどではonfocus, onblurイベントをよく使うが、windowオブジェクトで使えば、別タブを検知できるのは盲点だったなぁ。