Knowing if the page is in the background

The old way of doing this, which is also more compatible with older browsers, is like this:

var focused = true;
window.onfocus = function() {
    focused = true;
};
window.onblur = function() {
    focused = false;
};

And so at any time you can test if (focused) { and do something if it is positive or negative.

You can also combine this with document.hasFocus(); which basically does the same thing.

The way you expect is better, but it's still a recommendation, although it's being implemented in some browsers, it's the #

• document.hidden , which can be true or false
• document.visibilityState

Suggestion of polyfill

Here is a suggestion that seems to cover both cases of old browsers and also detects the new API that I mentioned. This suggestion has a global focused that is updated with each state change and also a function that is run when the state changes. I tested it here and it worked as it should:

var focused = true; // sempre atualizada
function visibilityHandler(state) {
    console.log(state); // vai registando mudanças
}
(function(cb) {

    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }

    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
        window.onfocus = function() {
            focused = true;
            cb(focused);
        };
        window.onblur = function() {
            focused = false;
            cb(focused);
        };
    } else {
        document.addEventListener(visibilityChange, function() {
            focused = !focused;
            cb(focused);
        }, false);
    }
})(visibilityHandler);

jsFiddle: link

I do not know if the "current way" that @Sergio mentioned is this, but you can use Page Visibility API .

Not supported for all browsers, as shown in the table below:

Inthe developer.mozilla you have a use tutorial (play video when page is visible), and its live demo shows how it works.

The Demo sample code is as follows:

   // Inline code is for educational purposes. Best practice is to put your scripts in external files.
    // Based on the tutorial at https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

(function() {
    'use strict';

    // Set the name of the "hidden" property and the change event for visibility
    var hidden, visibilityChange; 
    if (typeof document.hidden !== "undefined") {
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17
      hidden = "mozHidden";
      visibilityChange = "mozvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }

    var videoElement = document.getElementById("videoElement");

    // If the page is hidden, pause the video;
    // if the page is shown, play the video
    function handleVisibilityChange() {
      if (document[hidden]) {
        videoElement.pause();
      } else {
        videoElement.play();
      }
    }

    // Warn if the browser doesn't support addEventListener or the Page Visibility API
    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
      alert("This demo requires a modern browser that supports the Page Visibility API.");
    } else {
      // Handle page visibility change   
      document.addEventListener(visibilityChange, handleVisibilityChange, false);

      // When the video pauses and plays, change the title.
      videoElement.addEventListener("pause", function(){
        document.title = 'Paused';
      }, false);

      videoElement.addEventListener("play", function(){
        document.title = 'Playing'
      }, false);
    }

})();

Just for the knowledge, there are some projects for this purpose. What I know is the ifvisibility.