Use of PageVisibility API for page switch activation in HTML5

Use of PageVisibility API for page switch activation in HTML5

HTMl5 launched a very "special" API Page Visibility. The reason for this is that this API focuses on a feature that is rarely noticed-whether the browser tab is activated. It must be explained that the "activation" refers to whether the tag is being viewed by the user or whether it is the current tag.

So what is the purpose of this API? In general, many traditional pages continue to work when the user does not activate them. For example, when the user is browsing the news portal, the previously opened NBA game page will continue to refresh the latest results, and video websites will continue to use bandwidth to load resources. Therefore, if this type of unnecessary work is too much, this will cause a lot of waste of resources. Therefore, this product is quite useful:

The Web application automatically updates the page information at intervals to ensure that the user obtains the timely information. However, when the user is browsing other pages, it can be controlled to pause updates.
When you play an online video, the video is continuously loaded until the video is loaded. However, when you are browsing other pages, you can pause loading video resources to save bandwidth.
The homepage of the Website Supports automatic playback of large slides. When you browse other pages, you can pause playback.
Therefore, with Page Visibility, we can achieve at least one or more of the following benefits:

1. Saving server resources. Ajax round-robin is often ignored for this type of server resources. Disabling such requests can save resources.
2. Saves memory consumption.
3. save bandwidth consumption.

Therefore, using Page Visibility is good for both users and servers.

Next we will officially introduce this API. Page Visibility adds two properties, hidden and visibilityState, to the document Object of the browser. If the current tag is activated, the value of document. hidden is false; otherwise, the value is true. VisibilityState has four possible values:

Hidden: the value of visibilityState is hidden when the browser is minimized, the tag is switched, and the screen is locked by the computer.
Visible: if the document of the context in the browser is displayed on at least one screen, visible is returned. If the browser window is not minimized, but the browser is blocked by other applications, this is also visible.
Prerender: The prerender is returned when the document is loaded outside or invisible to the screen. This is an optional attribute and is supported by the browser.
Unloaded: unloaded is returned when the document is about to be removed (unload). The browser can also selectively support this attribute.
In addition, a visibilitychange event is added to the document, which is triggered when the visibility of the document changes.

Okay. After introducing the attributes, put a Demo (switch the tag to test ).

This Demo monitors whether the visibility of tags changes and generates a prompt when the visibility of tags changes.

It is worth noting that at present, browsers still support Page Visibility through private attributes. Therefore, when detecting or using the properties provided by Page Visibility, you must add a private browser prefix, for example, when detecting the visibilityState attribute in Chrome, you need to check the document. webkitVisibilityState instead of document. visibilityState. Therefore, the Demo checks the browser type before using the Page Visibility API. The main code is as follows:

Copy the content to the clipboard using JavaScript Code

1. Function browerKernel (){
3. Var result;
5. ['Webkit', 'moz', 'O', 'ms']. forEach (function (prefix ){
7. If (typeof document [prefix + 'den den ']! = 'Undefined '){
8. Result = prefix;
9. }
10. });
12. Return result;
14. }
16. Function init (){
18. Prefix = browerKernel ();
20. Var showTip = document. getElementById ('showtip ');
22. Document. addEventListener (prefix + 'visibilitychange', function onVisibilityChange (e ){
24. Var tip = null;
26. If (document [prefix + 'visibilitystate'] = 'den den ') tip =' <p> Leave page </p> ';
27. Else if (document [prefix + 'visibilitystate'] = 'visable') tip = '<p> enter the page </p> ';
29. ShowTip. innerHTML = showTip. innerHTML + tip;
30. });
31. }
33. Window. onload = init ();

Let's look at a specific example. The Code is as follows:

Copy the content to the clipboard using JavaScript Code

1. <! Doctype html>
2. <Html>
3. <Head>
4. <Script type = "text/javascript">
5. Timer = 0;
6. Function onLoad (){
7. Document. addEventListener ("visibilitychange", stateChanged );
8. Document. addEventListener ("webkitvisibilitychange", stateChanged );
9. Document. addEventListener ("msvisibilitychange", stateChanged );
10. }
11. Function stateChanged (){
12. Console. log (document. webkitVisibilityState );
13. If (document. hidden | document. webkitHidden | document. msHidden ){
14. // New tab or window minimized
15. Timer = new Date (). getTime ();
16. }
17. Else {
18. Alert ('you were away for '+ (new Date (). getTime ()-timer)/1000 + 'Seconds .')
19. }
20. }
21. </Script>
22. </Head>
23. <Body onLoad = "onLoad ()">
24. </Body>
25. </Html>

In the above Code, similarly, in CHROME running, the LOAD event listens to the related webkitvisibilitychange event (this is in CHROME). If it is IE 10, it is the msvisibilitychange event, then, in the callback function, you start to calculate the user's stay time on the page. Therefore, when you open another TAB page or minimize it, switch it back to the original page, JAVASCRIPT will pop up and display: how long have you left the page.
In CHROME, the attribute is named webkitHidden and the event is a webkitvisibilitychange event. In IE 10, the attribute is msHidden and msVisibilityState.