如何檢測頁面是否在jquery/javascript的背景或前景？

Question

標題解釋自己。我如何檢測網頁是否已經進入後臺？

我正在實現一個聊天應用程序，我將使用這些信息來決定顯示新的消息通知。我想GMail會使用類似的東西。如果頁面位於後臺，它將顯示桌面通知（在Chrome上），如果不是，則不會顯示它們。

Answer 1

我知道答案已經被選中，但我想分享另一種方式。

您可以使用document上的hasFocus方法查看它是否有重點。沒有理由設置你自己的變量。

下面是概念代碼的一些證明。 jsFiddle在底部。每3秒會檢查窗口是否有焦點 - 顯示真或假。

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年開始只在Mac上使用Linux，2015， 2014（可能更早）在Windows上。

雖然支持正在推出，但是一個虛假的消極是罕見的，但在一些平臺上發生誤報;例如，在2014年，OSX在碼頭上呈現微型版本的最小化應用程序，並且由於這樣做的結果，應用程序無法輕易判斷它是否被最小化，因爲它仍被要求繪製屏幕。 Linux知道你的應用程序是否在一個不可見的工作區上，以及另一個窗口是否被遮擋了，這使得Linux非常複雜。

第一份公開草案於2011年6月發佈，並於2013年5月達到「推薦」狀態。到2014年3月，所有主流Windows瀏覽器的最新版本全面支持該標準。 2015年4月全面支持所有主流Mac瀏覽器。到2016年8月，至少Chromium已實現Linux支持（關閉Chromium issue 293128時）。雖然我沒有測試過它們，但我預計其他Linux瀏覽器可能會保持步調，因爲最難的部分工作似乎是調整OS/GUI takeit合同和API，以瞭解您的桌面應用程序是否可見。