CODEWITHSUNDEEP
javascriptbrowser
fadedbee
fadedbee

Reputation: 44715

In a browser is there a way to find out whether the page is currently visible?

I've read:

Determine if window is active in webkit

and tried the demo at:

http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/

But that works on focus, and focus can be lost to another window, while the page is still visible (if the other window is not maximised).

What I'm looking for is a value which is true when the page is visible and false when it is not (or events on the transitions).

Edit: I suppose what I'm essentially looking for is "is this browser messing with my setIntervals and setTimeouts".

Edit: It looks like this is being sorted out: https://developer.mozilla.org/en/API/PageVisibility/Page_Visibility_API

Upvotes: 2

Views: 453

Answers (3)

user123444555621
user123444555621

Reputation: 152976

Turns out the W3C is currently working on making a standard:

https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html#sec-page-visibility

However, at the moment, this is only supported by Chrome.

Demo

Upvotes: 0

user123444555621
user123444555621

Reputation: 152976

You can't. User Agents don't give away this information.

After all, it doesn't make too much sense IMHO. What if the user has two broser windows and one of them is partially visible? fully hidden? both inactive? covered by some other application?

I think this is as close as you'll get: add mousemove, focus, keydown and scroll listeners to your body element, and expect the page to be visible for another x second timeout, where I have no idea what reasonable values for x may be.

Update: As a response to the comments below, here is a snippet that detects wether intervals are working as they should:

(function () {

    var requiredResolution = 10; // ms
    var checkInterval = 1000; // ms
    var tolerance = 20; // percent


    var counter = 0;
    var expected = checkInterval / requiredResolution;
    //console.log('expected:', expected);

    window.setInterval(function () {
        counter++;
    }, requiredResolution);

    window.setInterval(function () {
        var deviation = 100 * Math.abs(1 - counter / expected);
        // console.log('is:', counter, '(off by', deviation , '%)');
        if (deviation > tolerance) {
            console.warn('Timer resolution not sufficient!');
        }
        counter = 0;
    }, checkInterval);

})();

Upvotes: 1

Rebecca
Rebecca

Reputation: 587

Try

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}

and then set those functions.

Givingt credit where it's due... See:

Is there a way to detect if a browser window is not currently active?

Upvotes: 0

Related Questions