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 did not provide a tab, but now basically all browsers provide this functionality. As a programmer, I usually open 10 to 15 tabs at the same time, sometimes at 25 to 30.

Why is the page Visibility API introduced?

Previously, it was not possible to determine which tab was active and which was not, but with the help of the HTML 5 Visibility API, it was possible to detect whether a user was browsing a Web 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 will be popped based on the visibility status 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.visibilitystateand the other is Document.hidden. Their functions are different.

document.visibilitystate There are four different values:

1. Hidden: The page is not visible on any screen

2, PreRender: The page is loaded, not visible to the user

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 available properties, it's time to listen to the event, so you know what the visibility of the page is. This is

Using the Visibilitychange event , the example 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-detecting the state of the current page. But what you have to know is that all properties and methods must be prefixed, because they are private prefixes in some browsers. 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 that you have all the properties and methods of the browser with the prefix, you can use it with confidence. Make adjustments to the previous code:

//Get Browser Prefix  var prefix = Getbrowserprefix (); var hidden = hiddenproperty (prefix); var visibilitystate = visibilitystate (prefix); var function (event) {  if (!document[hidden]) {    //The page is visible.  Else {   //The page is hidden.  }});

Where do I need to use the visibility API?

you might consider using the API in the following situations:1, you are browsing a navigation page, and this page is looking for details from an RSS feed, or periodically call the API, if the page is not visible to the user,we can restrict calls to RSS feeds or APIs. 2, for the common hand-style effect, when the page is not visible, you can limit its movement. 3, the same way, only the page is not visible when the HTML Notification (translated: 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 sent from the server from the limit. in Demo2, how will we limit the query to refresh information from the server? Not only is the user browsing the page, but assumes that the page has been introducedthe jquery. To be simple, just count the instructions, but you can replace them 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

If you want to know if the browser supports the visibility API, I suggest going to can I use the query. However, it is recommended to programmatically detect whether the browser is supported, you can refer to detect support for Various HTML5 Features (translation:

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

Summarize

As I said, there is a nice API that contains two attributes and an event for us to use. It can be easily integrated into your existing applications and can bring a great 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