HTML5 Page Visibility, html5visibility

HTML5 Page Visibility, html5visibility

What is Page Visibility?
Page Visibility is the Page Visibility. The value of visibilityState is used to check whether the Page is currently visible. When a website is visible or clicked on the selected status, the Page Visibility API allows you to obtain this status. When a user minimizes the Page or browses a webpage with other tags, the API sends an event vibilitychange about visible information on the current page. You can detect the event and execute some activities or display different effects. This API is very useful in resource saving. When the webpage is invisible, this API provides developers with an interface to operate unnecessary tasks. For example, if a video is being played on your website, it may be paused when the user browses other browsers, so when the user switches back, the video can be played again. You can continue watching the video without losing the progress of the video because you browse other browsers.

What are the functions of the Page Visibility API?

• The website has the image carousel effect. The next display is automatically displayed only when users watch the carousel.
• When the application of the dashboard does not want to be invisible to the page, the query server is updated.
• The page needs to check whether rendering is in progress so that the page views can be accurately calculated.
• When the device enters the standby mode, the website wants to disable the device sound (the user presses the power key to close the screen)
• It can be applied to video sites. When a user enters the page to play the video, the page is paused.
• Applicable to login Synchronization
• It can be used to calculate the online duration.
• Online Chat exit status.
• There are also some switching effects. For example, when a user switches to your page, the logo will shake, or a page will flash, or other effects.

How to use it?

The Page Visibility API specification is simple and has only two attributes:

Document. hidden returns a Boolean value true or false Based on the browser window status.

Document. visibilityState stores the specific status string. There are four statuses:

• Visible: The page content is at least partially visible, and the foreground tab of a non-minimal window.
• Hidden: The page content is invisible to users. It can be a background tag, a part of the window is minimized, or the screen lock of the operating system is activated.
• Prerender: The page content is being pre-rendered and not visible to users.
• Unloaded: the page is being detached from the memory.

The following is an example of online computing duration:

<! DOCTYPE html> 
The code in the previous example is as follows: when the page is visible, the timer is stopped. When the page is invisible, the timer is stopped and the page title is synchronized with it (note the title when switching the tab ). Return to the page again to continue timing and display the number of times when the current exit is returned.
This article is just an introduction. It briefly introduces the basic usage, and implements more complex applications and effects on your own.