如何使用jquery/javascript检测页面是背景还是前景？

Question

标题解释了自己.如何检测网页是否已进入后台？

我正在实现一个聊天应用程序,我将使用此信息来决定显示新的消息通知.我想GMail会使用类似的东西.如果页面位于背景上,则会显示桌面通知(在Chrome上),如果不显示则不显示.

Answer 1

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

您可以使用该hasFocus方法document查看它是否具有焦点.没有理由设置自己的变量.

这是概念代码的一些证明.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

现在有一个页面可见性API,它得到了Windows,Mac OS X和Linux上所有最新版主流浏览器的良好支持(尽管我实际上没有用Linux浏览器公平分享所有浏览器)市场).

页面可见性API现在是检查可见性的最佳方法; 唯一需要注意的是,它无法告诉您浏览器窗口的哪些部分是可见的(只是没有任何内容可见或至少某些部分是可见的),并且该支持自2016年以来仅在Linux上出现,2015年在Mac上,以及2014年(可能更早)在Windows上.

虽然支持正在推出,但是假阴性很少,但在某些平台上出现了误报; 例如,在2014年,OSX在Dock中呈现了最小化应用程序的微缩版本,并且由于这种方式已经完成,应用程序无法轻易判断它是否被最小化,因为它仍然被要求绘制屏幕.知道您的应用程序是否位于不可见的工作空间,以及另一个窗口是否阻塞它,Linux很复杂.

第一个公开草案于2011年6月发布,并于2013年5月达到"推荐"状态.到2014年3月,所有主要Windows浏览器的最新版本都完全支持该标准.2015年4月实现了对所有主要Mac浏览器的全面支持.到2016年8月(当Chromium issue 293128关闭时)至少为Ch​​romium实现了Linux支持; 虽然我还没有对它们进行测试,但我预计其他Linux浏览器可能会保持同步,因为这项工作中最困难的部分似乎是调整操作系统/ GUI的合同和API,以便了解您的桌面应用程序是否可见.