Comments: 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 browser labels (tabs) are 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:
1. The Web program automatically updates page information at intervals to ensure that the user obtains timely information. However, when the user is browsing other pages, he can control the pause of updates.
2. When playing an online video, the video will be continuously loaded until the video is loaded. However, when you are browsing other pages, you can pause loading video resources to save bandwidth.
3. automatic playback of large slides is available on the homepage of the website. 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:
1. hidden: the value of visibilityState is hidden when the browser is minimized, the tag is switched, and the screen is locked by the computer.
2. 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.
3. prerender: The prerender is returned when the document is loaded outside the screen or invisible. This is an optional attribute and is supported by the browser.
4. unloaded: unloaded is returned when the document is about to be unloaded. 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 user instance (copy the code and save it to an HTML file, switch the tag to test the effect ).
The Code is as follows:
<! Doctype html>
<Html lang = "zh-CN">
<Head>
<Meta charset = "UTF-8"/>
<Title> test HTML5 Page Visibility API </title>
</Head>
<Body> </p> <div id = "showTip"> </div>
<Script>
Function browerKernel (){
Var result;
['Webkit', 'moz', 'O', 'ms']. forEach (function (prefix) {</p> <p> if (typeof document [prefix + 'den den ']! = 'Undefined '){
Result = prefix;
}
});
Return result;
}
Function init (){
Prefix = browerKernel ();
Var showTip = document. getElementById ('showtip ');
Document. addEventListener (prefix + 'visibilitychange', function onVisibilityChange (e ){
Var tip = null;
If (document [prefix + 'visibilitystate'] = 'den den ') tip =' <p> Leave page </p> ';
Else if (document [prefix + 'visibilitystate'] = 'visable') tip = '<p> enter the page </p> ';
ShowTip. innerHTML = showTip. innerHTML + tip;
});
}
Window. onload = init ();
</Script>
</Body>
</Html>
This instance 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
