QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Page Visibility API Tutorial with Example

Page Visibility API Tutorial with Example

This post is a part 10 of Advanced JavaScript APIs post series.

This API is available for both mobile and desktop browsers.

Page visibility API can be used to find out weather the webpage is visible to the user or not.

Here is a look at Page visibility API

//document.hidden retuns true if page is not visible.
            if("hidden" in document)
            {
                console.log("Hidden status: " + document.hidden);
            }
            else if("mozHidden" in document)
            {
                console.log("Hidden status: " + document.mozHidden);   
            }
            else if("msHidden" in document)
            {
                console.log("Hidden status: " + document.msHidden);
            }
            else if("webkitHidden" in document)
            {
                console.log("Hidden status: " + document.webkitHidden);
            }
            else
            {
                console.log("Your browser doesn't support page visibility API");
            }

            //document.visibilityState retuns visible, hidden, prerender or unloaded.
            //prerender means document content is being prerenderd and is not visible to the users.
            //unloaded means page is being unloaded from memory.
            if("visibilityState" in document)
            {
                console.log("Visibility State is : " + document.visibilityState);
            }
            else if("mozVisibilityState" in document)
            {
                console.log("Visibility State is : " + document.mozVisibilityState);
            }
            else if("msVisibilityState" in document)
            {
                console.log("Visibility State is : " + document.msVisibilityState);
            }
            else if("webkitVisibilityState" in document)
            {
                console.log("Visibility State is : " + document.webkitVisibilityState);
            }
            else
            {
                console.log("Your browser doesn't support page visibility API");
            }


            //this event is fired when value of document.hidden or document.visibilityState changes.
            document.addEventListener("visibilitychange", function() {}, false);
            document.addEventListener("mozvisibilitychange", function() {}, false);
            document.addEventListener("msvisibilitychange", function() {}, false);
            document.addEventListener("webkitvisibilitychange", function() {}, false);
Jan 28, 2015Narayan Prusty
HTML5 Full Screen API Tutorial with DemoHTML5 Proximity API

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Web Alarms API Tutorial
  • HTML5 Battery Status API with Code Example
  • HTML5 Proximity API
  • HTML5 Full Screen API Tutorial with Demo
  • Prioritising Downloading Of Webpage Resources
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license