Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand and use HTML5 visibilityState properties", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand and use HTML5 visibilityState properties.

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

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

The 1.Web program automatically updates page information at regular intervals to ensure that users get timely information, but you can control it to pause updates when users are browsing other pages.

two。 Video websites continue to load videos when they play online videos until the video is loaded, but when users are browsing other pages, they can pause the loading of video resources to save bandwidth.

3. There is a large slide on the front page of the website to play automatically, and when users browse other pages, they can pause the playback.

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

1. Save server resources. Server resources such as Ajax polling are often ignored, and closing such requests can save resources.

two。 Save memory consumption.

3. Save bandwidth consumption.

Therefore, using Page Visibility is good for both the user and the server.

Next, let's formally introduce 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 four possible values:

1.hidden: the visibilityState value is hidden when the browser is minimized, the tabs are switched, and the computer locks the screen.

2.visible: returns visible; when the document of the browser's top-level context (context) is displayed in at least one screen. When the browser window is not minimized, but the browser is obscured by other applications, it is also visible.

3.prerender: returns prerender when the document is loaded off the screen or is not visible. This is an unnecessary attribute and can be optionally supported by the browser.

4.unloaded: returns unloaded when the document is about to be unload. Browsers also optionally support this attribute.

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

All right, after introducing the properties, put a usage example (save to a HTML file, open it and switch tabs to test the effect).

The code is as follows:

Test HTML5 Page Visibility API

Function browerKernel () {

Var result

['webkit',' moz', 'oasis,' ms'] .forEach (function (prefix) {

If (typeof document [prefix + 'Hidden']! =' 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'] = =' hidden') tip ='

Leave the page

'

Else if (document [prefix + 'VisibilityState'] = =' visible') tip ='

Enter the page

'

ShowTip [XSS _ clean] = showTip [XSS _ clean] + tip

});

}

_ window.onload = init ()

The purpose of this example is to listen for changes in the visibility of the tag and to prompt when the visibility of the tag changes.

It is worth noting that at present, browsers still support Page Visibility through private attributes, so you need to add a browser private prefix to detect or utilize the attributes provided by Page Visibility. For example, when you detect the above visibilityState attribute in Chrome, you need to detect document.webkitVisibilityState instead of document.visibilityState. Therefore, the browser type is first detected in Demo before using Page Visibility's API.

At this point, I believe you have a deeper understanding of "how to understand and use HTML5 visibilityState properties". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.