如何检测页面是否在jquery/javascript的背景或前景？

标题解释自己。我如何检测网页是否已经进入后台？如何检测页面是否在jquery/javascript的背景或前景？

我正在实现一个聊天应用程序，我将使用这些信息来决定显示新的消息通知。我想GMail会使用类似的东西。如果页面位于后台，它将显示桌面通知（在Chrome上），如果不是，则不会显示它们。

来源

2011-11-22 Çağatay Gürtürk

你的意思是：*如果聊天弹出打开* ？ –

认为您正在使用Gmail，阅读电子邮件等。并且您收到了一条消息，在这种情况下，gmail不会显示任何桌面通知（因为该页面位于前台）但如果您在其他网站上浏览，而Gmail仍然打开后，您会收到桌面通知的警告。 gmail如何理解其状态？ –

我知道答案已经被选中，但我想分享另一种方式。

您可以使用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/

来源

2011-11-22 23:33:50 natedavisolds

我将使用window.document.hasFocus（）来决定显示通知。感谢鼓舞人心！ –

优秀的提示！需要注意的一点是，这仅仅用于检查*文档*是否具有焦点 - 看起来很明显，但如果页面上的另一个框架具有焦点（可在jsFiddle中测试），或者地址栏具有焦点焦点。 –

至少目前这绝对是更有用的跨浏览器方法......值得注意的是，这种方法可能会返回错误的否定结果（如果页面使用多个框架，或者用户将焦点放在文档之外或完全关闭浏览器，而不隐藏页面），但Google的实验性API却相反，给前景标签带来误报，而这些标签完全被其他窗口隐藏。所以最好的使用方法也可能取决于假阳性还是阴性更值得关注。 –

您可以绑定到window的blur和focus事件。下面是从an app I wrote一个代码片段：

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

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

来源

2011-11-22 23:07:56

现在有这个一个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，以了解您的桌面应用程序是否可见。

来源

2011-11-22 23:12:19

非常有趣，特别是能够检测到“prerender”状态，这已经让我在以前咬过... –

我不知道这样的API，谢谢。但似乎在生产这样的实验性API中使用并不合乎逻辑。 –

只是为了节省大家几次点击：http：//caniuse.com/#feat=pagevisibility –

如何检测页面是否在jquery/javascript的背景或前景？

回答

相关问题