jquery/javascriptを使用してページがバックグラウンドまたはフォアグラウンドにあるかどうかを検出するにはどうすればよいですか？

Question

タイトル自体について説明しています。ウェブページがバックグラウンドになったかどうかを検出するにはどうすればよいですか？

私はチャットアプリケーションを実装しており、この情報を使用して新しいメッセージ通知の表示を決定します。私はGMailがそういうものを使っていると思う。ページが背景にある場合は、（クロム上の）デスクトップ通知を表示し、そうでない場合は表示しません。

Answer 1

回答は既に選択されていますが、私は別の方法で共有したいと思います。

documentでhasFocusメソッドを使用して、フォーカスがあるかどうかを確認できます。独自の変数を設定する理由はありません。

ここに、概念コードの証明があります。 jsFiddleは一番下にあります。 3秒ごとに、ウィンドウにフォーカスがあるかどうかがチェックされ、trueまたはfalseが表示されます。

HTML：

<p>This will show if the document has focus every three seconds</p> 
<button id="go">Go</button> 
<button id="stop">Stop</button> 

<ul id="active_log"> 
</ul> 

CSS：内部

#stop { display: none; } 

Javascriptの文書準備に：

var timeout = null; 

var checkActive = function() { 
    var isActive = window.document.hasFocus(), 
     $activity = $("<li />").text(isActive.toString()); 

    $('#active_log').prepend($activity).find('li:nth-child(n+6)').fadeOut(function() { 
     $(this).remove(); 
    }); 

    timeout = setTimeout(checkActive, 3000); 
} 

$('#go').click(function() { 
    $(this).hide().siblings('button').show(); 
    checkActive(); 
}); 

$('#stop').click(function() { 
    $(this).hide().siblings('button').show(); 
    clearTimeout(timeout); 
    timeout = null; 
}); 

http://jsfiddle.net/natedavisolds/2D7za/1/

Answer 2

windowのblurとfocusイベントにバインドすることができます。ここでan app I wroteからの抜粋コードは次のとおりです。

$(window).bind("blur", function() { 
    Chatterbox.set_focused(false); 
}); 

$(window).bind("focus", function() { 
    Chatterbox.set_focused(true); 
}); 

Answer 3

あり、今だこのためpage visibility API、それは私が持っているのにWindows版、Mac OS X、およびLinux（上の主要なブラウザのすべての最も最近のバージョンでも、サポートされていますLinuxブラウザ市場でかなりのシェアを持つすべてのブラウザで実際にテストされたわけではありません）。

ページの可視性APIは、可視性を確認するための最良の方法です。唯一の注意点は、ブラウザーウィンドウのどの部分が表示されているかはわかりません（表示されていないか、少なくとも一部です）。そのサポートは、2016年のLinux、Macの2015、 2014年（おそらく以前のバージョン）のWindows。

サポートが展開されている間、偽陰性はまれではありましたが、一部のプラットフォームで誤検出が発生しました。たとえば、2014年にOSXは最小化されたアプリケーションの最小バージョンをドックにレンダリングし、これが行われた結果として、アプリケーションは画面をペイントするよう依頼されたため、最小化されたかどうかを簡単には判断できませんでした。 Linuxは、アプリケーションが非表示のワークスペース上にあるかどうか、および別のウィンドウがそれを隠していたかどうかを知ることで複雑になりました。

2011年6月に最初のパブリックドラフトが公開され、2013年5月に「推奨」ステータスに達しました.2014年3月までに、すべての主要なWindowsブラウザの最新バージョンが完全にサポートされました。 2015年4月に主要なMacブラウザをフルサポートしました.2016年8月までにChromium以上のLinuxサポートが達成されました（Chromium issue 293128が閉鎖された時）。私はそれらをテストしていませんが、他のLinuxブラウザーがペースを保っている可能性が高いと思います。デスクトップアプリケーションが可能かどうかを知るために、OS/GUIツールとAPIを調整しているようです。