Question

The title explains itself. How can I detect if a web page has gone to background?

I’m implementing a chat application and I’ll use this information to decide showing new message notifications. I suppose that GMail uses something like that. If the page is on background, it shows desktop notifications (on chrome), if not it doesn’t show them.

Answer 1

I know that the answer has already been selected but I wanted to share another way.

You can use the hasFocus method on the document to see if it has the focus. There is no reason to set your own variable.

Here’s some proof of concept code. jsFiddle is at the bottom. Every 3 seconds it will check if the window has focus or not–displaying true or false.

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 inside on document ready:

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/