Detailed introduction and usage examples of HTML5 visibilityState attribute_html5 tutorial skills

It must be explained here that this "activation" refers to whether this label is being browsed by the user, or whether it is the current label.

So, what exactly is this API used for? Usually, many traditional pages will continue to work when the user does not activate them. For example, when the user is browsing a news portal, the NBA game page he opened before will continue to refresh to get the latest results, and video websites will continue to occupy bandwidth. Loading resources, so if there is too much unnecessary work, it will cause a lot of waste of resources. Therefore, this product is quite useful:

1. The Web program will automatically update page information every once in a while to ensure that users get timely information. However, when users are browsing other pages, they can control it to pause the update.
2. Video websites will continue to load videos when playing online videos until the video is loaded. However, when users are browsing other pages, they can pause the loading of video resources to save bandwidth.
3. There is a large slideshow on the homepage of the website that automatically plays. When the user browses other pages, the playback can be paused.

So, through Page Visibility, we can achieve at least one or more of the following benefits:

1. Save server resources. Server resource usage such as Ajax polling is often ignored. Turning off this type of request can save resources.
2. Save memory consumption.
3. Save bandwidth consumption.

Therefore, using Page Visibility has benefits for both the user and the server.

The following is a formal introduction to this API. Page Visibility adds two properties hidden and visibilityState to the browser's document object. If the current tag is activated, the value of document.hidden is false , otherwise it is true . visibilityState has 4 possible values:

1.hidden: When the browser is minimized, tabs are switched, or the computer is locked, the visibilityState value is hidden
2.visible: When the document of the browser’s top-level context is displayed on at least one screen, visible is returned; when the browser window is not minimized but the browser is blocked by other applications, it is also visible
3.prerender: Returns prerender when the document is loaded outside the screen or invisible. This is a non-essential attribute and the browser can optionally support it.
4.unloaded: Returns unloaded when the document is about to be left (unload). The browser can also optionally support this attribute

In addition, a visibilitychange event will be added to the document, which is triggered when the visibility of the document changes.

Okay, after introducing the attributes, let’s put in a usage example (copy the code and save it to an HTML file, open it and switch tags to test the effect).

Copy code

The code is as follows:

<script><br> function browerKernel(){<br> var result;<br> ['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p> <p> if( typeof document[ prefix 'Hidden' ] != 'undefined' ){<br> result = prefix;<br> }<br> });<br> return result;<br> }<br> function init(){<br> prefix = browerKernel();<br> var showTip = document.getElementById('showTip');<br> document.addEventListener( prefix 'visibilitychange', function onVisibilityChange(e){<br> var tip = null; <br> if( document[ prefix 'VisibilityState' ] == 'hidden' ) tip = '<p>Leave page</p>';<br> else if( document[ prefix 'VisibilityState' ] == 'visible' ) tip = '<p>Enter page</p>';<br> showTip.innerHTML = showTip.innerHTML tip;<br> });<br> }<br> window.onload = init();<br> </script>

The purpose of this instance is to monitor whether the visibility of the label changes and generate a prompt when the visibility of the label changes.

It is worth noting that at present, browsers still support Page Visibility through private attributes, so when detecting or utilizing the attributes provided by Page Visibility, you need to add the browser private prefix, such as detecting the above in Chrome visibilityState property, you need to detect document.webkitVisibilityState instead of document.visibilityState. Therefore, the Demo will first detect the browser type and then use the Page Visibility API.