QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 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
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license