読者です 読者をやめる 読者になる 読者になる

WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

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

前置き

今やっている案件(既存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オブジェクトで使えば、別タブを検知できるのは盲点だったなぁ。