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

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

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

解决方法

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

您可以在文档上使用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/

原文地址：https://www.jb51.cc/jquery/178929.html