HTML5 visibilitystate attribute details and usage examples

Time:2022-5-11

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

So, what is the purpose 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, the NBA game page he opened before will continue to refresh to obtain the latest results, and the video website will continue to occupy bandwidth and load resources. Therefore, if there is too much unnecessary work, it will cause a lot of waste of resources. Therefore, the goods are quite useful:

1. The web program will automatically update the page information at regular intervals to ensure that users get timely information. However, when users are browsing other pages, they can control it to pause the update.
2. When playing online videos, video websites will continue to load videos until they are loaded. However, when users are browsing other pages, they can pause loading video resources to save bandwidth.
3. There is a big slide on the home page of the website, which can be played automatically. When users browse other pages, they can pause the play.

Therefore, through page visibility, we can achieve at least one or more of the following benefits:

1. Save server resources. The use of server resources such as Ajax polling is often ignored. Closing this request can save resources.
2. Save memory consumption.
3. Save bandwidth consumption.

Therefore, using page visibility is beneficial to both users and servers.

Next, let’s formally introduce this API. Page visibility adds two attributes hidden and visibilitystate to the document object of the browser. If the current tag is activated, then document The value of 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 label is switched, and the computer is locked
2. Visible: when the document of the browser’s top-level context is displayed in at least one screen, return visible; It is also visible when the browser window is not minimized, but the browser is blocked by other applications
3. Prerender: when the document is loaded outside the screen or is not visible, it returns prerender. This is an unnecessary attribute, which can be selectively supported by the browser.
4. Unloaded: return unloaded when the document is about to be unloaded, and the browser can optionally support this attribute

In addition, the visibility change event will be added to the document. This event will be triggered when the visibility of the document changes.

Well, after introducing the attributes, put a use example (copy the code and save it to an HTML file, open it and switch the tag to test the effect).

Copy code

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>
<p> <div></div>
<script>
function browerKernel(){
var result;
[‘webkit’, ‘moz’, ‘o’, ‘ms’].forEach(function(prefix){</p>
<p> 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 = ‘< p > leave page < / P >’;
Else if (document [prefix +’visibilitystate ‘] =’ visible ‘) tip =’ < p > enter the page < / P > ‘;
showTip.innerHTML = showTip.innerHTML + tip;
});
}
window.onload = init();
</script>
</body>
</html>

The function of this instance is to monitor whether the visibility of the tag changes, and generate a prompt when the visibility of the tag changes.

It is worth noting that at present, the browser still supports page visibility through private attributes. Therefore, when detecting or using the attributes provided by page visibility, you need to add the browser private prefix. For example, when detecting the visibilitystate attribute above in chrome, you need to detect document Webkitvisibilitystate instead of document visibilityState 。 Therefore, the browser type will be detected first in the demo, and then the API of page visibility will be used.