Talk: HTML 5 page Visibility API

Source: http://www.ido321.com/1126.html

Original: HTML5 Page Visibility API

Page Visibility API for HTML 5

Translator: Dwqs

In the early days. The browser does not provide a tab, but this feature is now available in all basic browsers.

As a program ape, I usually open 10 to 15 tabs at the same time, sometimes at 25 to 30.

Why is the page Visibility API introduced?

Before, it is impossible to determine which tab is active and which is not. However, with the help of the HTML 5 Visibility API, it is possible to detect whether a user is browsing a site's page.

In this article, we will understand how to use the HTML 5 Visibility API, and use a small demo to discover the state of the page.

In this demo. The title of the document pops up based on the visibility state of the page.

Check the visibility of a page

In order to use the visibility API, we need to understand two new document properties, the first one is document.visibilitystate, and the other is Document.hidden. Their functions are different.

document.visibilitystate There are four different values:

1, Hidden: The page is not visible on whatever screen

2, PreRender: page is loaded. Not visible to users

3, Visible: page visibility

4, unloaded: page unload (that is, the user will leave the current page)

Document.hidden is a Boolean value, False indicates that the page is visible, and true indicates that the page is not visible.

Now that you know the properties that are available, it's time to listen to the events, so you know what the visibility of the page is. This is

With the Visibilitychange event completed, the scale is as follows:

Document.addeventlistener (' visibilitychange 'function(event) {  if (! Document.hidden) {    //The page is visible.  Else {   //The page is hidden.  }});

This code is a simple application of the Visibilitychange event-checking the status of the current page. But all you have to know is that all properties and methods must be prefixed. Because they are in some browsers with a private prefix.

The following is a cross-browser case:

//Get browser-specifc PrefixfunctionGetbrowserprefix () {//Check for the Unprefixed property.  if(' Hidden ' inchDocument) {return NULL; }//all the possible prefixes.  varBrowserprefixes = [' Moz ',' MS ',' O ',' WebKit ']; for(vari = 0; i < browserprefixes.length; i++) {varprefix = browserprefixes[i] +' Hidden ';if(PrefixinchDocument) {returnBrowserprefixes[i]; }  }//The API is not a supported in browser.  return NULL;}//Get Browser specific Hidden propertyfunctionHiddenproperty (prefix) {if(prefix) {returnPrefix +' Hidden '; }Else{return ' Hidden '; }}//Get Browser specific Visibility statefunctionVisibilitystate (prefix) {if(prefix) {returnPrefix +' Visibilitystate '; }Else{return ' Visibilitystate '; }}//Get Browser specific EventfunctionVisibilityevent (prefix) {if(prefix) {returnPrefix +' Visibilitychange '; }Else{return ' Visibilitychange '; }}

Now with all the browsers prefixed with the properties and methods, you can be assured that the application. Make adjustments to the previous code:

//Get Browser Prefix var prefix = Getbrowserprefix (); var hidden = hiddenproperty (prefix); var visibilitystate = visibilitystate (prefix); var visibilityevent = visibilityevent (prefix); Document.addeventlistener (visibilityevent, function(event) { if (!document[hidden]) {  c10>//the page is visible.  } Else { //the page is hidden. }});

Where do I need to use the visibility API?

in the following cases. You can consider using the API:1, you are browsing a navigation page. And this page is querying the details from an RSS feed, or calling the API periodically, assuming the page is not visible to the user. we are able to restrict calls to RSS feeds or APIs. 2, for the common hand-style effect. When the page is not visible, it can restrict its movement. 3, the same way, only the page is not visible when. To display HTML Notification (translation: http://www.ido321.com/1130.html) to the user. we already know how the code calls the visibility API, and then we'll look at a demo.

Demo

Demo1: Change page title with Visibility API: View DemoDemo2: When the page is not visible, how to query the data transferred from the server from the limit. in Demo2, how do we limit the query to refresh information from the server? Not only is the user browsing the page. And if the page has been introducedthe jquery. For simplicity, it is only counted, but can be replaced with real server data.

Html:

<!--This element would show updated count ---  <H1id= "Valuecontainer">0</H1  >

Javascript:

<script type="Text/javascript">//Get Browser Prefix    varprefix = Getbrowserprefix ();varHidden = hiddenproperty (prefix);varvisibilitystate = visibilitystate (prefix);varvisibilityevent = visibilityevent (prefix);varTimer =NULL;functionIncreaseval () {varnewval = parseint ($ (' #valueContainer '). Text ()) + parseint (1); $(' #valueContainer '). Text (newval); Document.title = newval +': Running '; Timer = SetTimeout (function() {increaseval ();    }, 1); }//Visibility ChangeDocument.addeventlistener (Visibilityevent,function(Event) {if(Document[hidden]) {cleartimeout (timer);varval = parseint ($ (' #valueContainer '). text ()); Document.title = val +': Pause '; }Else{Increaseval ();         }    });     Increaseval (); </script>

View Demo

Browser support

Suppose you want to know if the browser supports the visibility API, I suggest going to can I use? to inquire. However, it is recommended to programmatically test whether the browser supports it. Be able to refer to detect support for Various HTML5 Features (translation:

http://www.ido321.com/1116.html). This API has been very well supported in mainstream modern browsers

Summarize

As I said, there is a very nice API that includes two attributes and an event for us to use. It can be very easy to integrate into your existing applications. And can bring a very good user experience. The last point is that when the page is not visible to the user, we can control the behavior of the page.

Next: Talk: The message notification mechanism of HTML 5

Talk: HTML 5 page Visibility API