Comment: HTML5 has launched a very "special" API Page Visibility. The reason why it is special is that this API focuses on a feature that few people pay attention to - whether the browser tag (tab) is activated
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, and the NBA game page he opened before will continue to refresh and get the latest results, the video website will continue to occupy bandwidth and load resources. Therefore, if too much unnecessary work is needed, a lot of resource waste will be caused. Therefore, this is quite useful:
1. The web program will automatically update the page information every once in a while to ensure that the user obtains timely information. However, when the user is browsing other pages, it can be controlled to pause updates.
2. When the video website plays online video, it will continuously load the video until the video is loaded. However, when the user is browsing other pages, it can pause the loading of video resources to save bandwidth.
3. There is a large slide on the homepage of the website that automatically plays. When the user browses other pages, the playback can be paused.
Therefore, through Page Visibility, we can achieve at least one or more of the following benefits:
1. Save server resources. Ajax polling is often ignored. Close this request can save resources.
2. Save memory consumption.
3. Save bandwidth consumption.
Therefore, using Page Visibility is beneficial for both users and servers.
Next, let’s formally introduce this API. Page Visibility adds two properties hidden and visibilityState on the browser's document object. If the current tag is activated, the value of document.hidden is false, otherwise true. visibilityState has 4 possible values:
1.hidden: When the browser is minimized, switches tags, and locks the computer screen, the visibilityState value is hidden
2.visible: When the document of the top-level context of the browser is displayed in at least one screen, it returns visible; 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 is invisible. This is a non-essential property and the browser can selectively support it.
4.unloaded: Return unloaded when the document is about to be left (unload), and the browser can also selectively support this property.
In addition, the visibilitychange event is added on the document, which is triggered when the visibility of the document changes.
Okay, after introducing the properties, put a usage example (copy the code and save it to an HTML file, switch the tags to test the effect after opening).
<!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 browserKernel(){
var result;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p><p> if( typeof document[ prefix + 'Hidden' ] != 'undefined' ){
result = prefix;
}
});
return result;
}
function init(){
prefix = browserKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( prefix + 'visibilitychange', function onVisibilityChange(e){
var tip = null;
if( document[ prefix + 'VisibilityState' ] == 'hidden' ) tip = '<p>Leave the 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 purpose of this example 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, browsers support Page Visibility through private attributes. Therefore, when detecting or utilizing properties provided by Page Visibility, you need to add a browser private prefix. For example, when detecting the above visibilityState property in Chrome, you need to detect document.webkitVisabilityState instead of document.visibilityState. Therefore, the demo will first detect the browser type, and then use the Page Visibility API.