1. ホーム
  2. javascript

ChromeでJavascriptを使ってタブのフォーカスがあるかないかを検出する方法は?

2023-09-22 01:54:30

質問

Google Chromeで、ユーザーが現在タブを表示しているかどうかを知る必要があります。ウィンドウにバインドされたイベント blur と focus を使用しようとしましたが、blur だけが正しく動作しているようです。

window.addEventListener('focus', function() {
  document.title = 'focused';
});

window.addEventListener('blur', function() {
  document.title = 'not focused';
});

フォーカスイベントの動作がおかしいのですが、たまにしか動作しません。他のタブに切り替えたり、戻ったりすると、focus イベントは作動しません。しかし、アドレス バーをクリックし、ページに戻ると、それが有効になります。または、別のプログラムに切り替えてから Chrome に戻ると、そのタブが現在フォーカスされている場合は、アクティブになります。

どのように解決するのですか?

2015年更新です。 visibility APIを使った新しいHTML5の方法(Blowsieさんのコメントから引用)。

document.addEventListener('visibilitychange', function(){
    document.title = document.hidden; // change tab text for demo
})


元の投稿者が(質問で)示したコードは、2011年現在、動作しています。

window.addEventListener('focus', function() {
    document.title = 'focused';
});

window.addEventListener('blur', function() {
    document.title = 'not focused';
});

編集 : 数ヶ月後の Chrome 14 では、これはまだ動作しますが、ユーザーはウィンドウ内のどこかを少なくとも一度はクリックして、ページとインタラクトしていなければなりません。単にスクロールしたりするだけでは動作しません。動作内容 window.focus() を実行しても、自動的に動作するようにはなりません。もし、回避策をご存知の方がいらっしゃいましたら、ご教示ください。