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

前端之家收集整理的这篇文章主要介绍了如何使用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/

猜你在找的jQuery相关文章