web-dev-qa-db-ja.com

Javascriptを使用してChromeでタブがフォーカスされているかどうかを検出する方法は？

ユーザーが現在Google Chromeでタブを表示しているかどうかを知る必要があります。ウィンドウにバインドされたイベントブラーとフォーカスを使用しようとしましたが、ブラーのみが正しく機能しているようです。

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

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

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

javascriptgoogle-chromefocus
69
fent

2015 update：可視性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()を実行しても、自動的に動作するわけではありません。回避策を知っている人は、言及してください。

121
ninjagecko

質問に対して選択された回答 ブラウザウィンドウが現在アクティブでないかどうかを検出する方法はありますか？ は機能するはずです。 2011-06-02にW3Cによって作成された Page Visibility API を利用します。

8
thirdender

ぼかしでページタイトルを交換し、フォーカスがある元のページタイトルに戻る場合：

// Swapping page titles on blur
var originalPageTitle = document.title;

window.addEventListener('blur', function(){
    document.title = 'Don\'t forget to read this...';
});

window.addEventListener('focus', function(){
    document.title = originalPageTitle;
});
2
stacigh

結局はうまくいくかもしれませんが、私は興味を持ち、このコードを書きました：

...
setInterval ( updateSize, 500 );
function updateSize(){
  if(window.outerHeight == window.innerHeight){
    document.title = 'not focused';             
  } else {
    document.title = 'focused';
  }

  document.getElementById("arthur").innerHTML = window.outerHeight + " - " + window.innerHeight;
}
...
<div id="arthur">
  dent
</div>

このコードは、あなたが望むことを正確に行いますが、butい方法です。問題は、Chromeは時々タイトルの変更を無視するようです（タブに切り替えてマウスを1秒間押し続けると、常にこの効果が生じるようです）。

画面にはさまざまな値が表示されますが、タイトルは変わりません。

結論：あなたが何をしているにせよ、それをテストするとき、結果を信頼しないでください！

2
Bastiaan Linders

Onblur =およびonfocus =イベントをインラインに追加すると、問題が回避されることがわかりました。

0
Trass Vasston

これはJQueryで動作する可能性があります

$(function() {
    $(window).focus(function() {
        console.log('Focus');
    });

    $(window).blur(function() {
        console.log('Blur');
    });
});
0
Konga Raju