Check whether Browser tab is Active or Inactive using JQuery

In some situations we require to know whether our webpage is active or Inactive (i.e user works on other browser tab or another window) and need to perform some tasks based on the browser tab status. It is particularly useful for saving resources and not to perform unnecessary tasks when tab is not active. We can achive this using Page Visibility API ,it lets your application know when a page is visible to the user.

The current version of the Page Visibility API defines two document properties:
   1)  the boolean hidden and
   2)  the enumeration visibilityState.

     The visibilityState property currently has four possible values:

• "hidden": the document is completely hidden from view
• "visible": the document is at least partially visible on at least one display device
• "prerender": the document is loaded off-screen and not visible (this value is optional; only some browsers supports it)
• "unloaded": if the document is to be unloaded, then this value will be returned (this value is optional; only some browsers supports it)

The hidden attribute returns true when the document is not visible at all

Note: In Android Browser, these properties are vendor-prefixed, where you’ll need to use prefixed versions such as "webkitHidden" and "webkitVisibilityState". All other supporting browsers (IE 10+, Firefox, Chrome, Safari) implement the un-prefixed versions.

We can achieve this using simple JavaScript and jQuery both.

Using JQuery

$(document).ready(function () {
     $(window).focus(function(){
          document.title = 'Active';
     });
     $(window).blur(function(){
          document.title = 'Inactive';
     });
});


Using Javascript

Method 1: Using 'hidden' property

setInterval(function () { visibilitychange() }, 200);

visibilitychange = function () {

      var hidden;
      if (typeof document.hidden !== "undefined") {
             hidden = "hidden";
         }
     else if (typeof document.webkitHidden !== "undefined") {
             hidden = "webkitHidden";
          }
     else if (typeof document.mozHidden !== "undefined") {
               hidden = "mozHidden";
          }
     else if (typeof document.msHidden !== "undefined") {
                hidden = "msHidden";
           }

     if (document[hidden])
       document.title = "Inactive";
     else
        document.title = "Active";
 }


Method 2: Using 'visibilityState' property

 setInterval(function () { visibilitychange() }, 200);

 visibilitychange = function () {

    var BrowserState;
    if (typeof document.hidden !== "undefined") {
              BrowserState = "visibilityState";
         }
    else if (typeof document.webkitHidden !== "undefined") {
              BrowserState = "webkitVisibilityState";
         }
    else if (typeof document.mozHidden !== "undefined") {
              BrowserState = "mozVisibilityState";
         }
    else if (typeof document.msHidden !== "undefined") {
             BrowserState = "msVisibilityState";
         }

     if (document[BrowserState] == "hidden")
        document.title = "Inactive";
     else
        document.title = "Active";
  }


It is useful in the following situations

1) Play/Pause the video if webpage is not active.
2) An application can decide to display notifications to the user only when it is hidden from view
3) A website has an image carousel that shouldn’t move to the next slide if user are not viewing the page.

Gopikrishna