Detecting page activity status via HTML5 Visibility API

A few years ago, when we browsed the Web page, there was no tabbed browsing mode, each page would be a browser window, and if I remember correctly, we all browsed the Web before Win7. As a programmer, we often open 10-15 pages in conjunction with each other, and more than 20 are not surprising.

Why use this API?

Early on we had no way to determine which tabs were active, but now through the HTML Visibility API we can detect if a visitor is browsing our interface.

In this tutorial we'll show you how to use the HTML5 Visibility API, and we've prepared a simple demo to check the status of the page. In the demo, we will modify the title of the document according to the status of the page.

View the status of a page

With the advent of this API, we have ushered in two new document attributes, namely Document.visibilitystate and Document.hidden.

The document.visibilitystate has four selectable values:

• Hidden: The page has not been browsed on any screen.

• PreRender: The page is in the tab, but the visitor is not on this tab now.

• visible: visitors are browsing.

• unloaded: The page has been loaded and now jumps to the other interface.

Document.hidden is a Boolean-type property.

Now we can control our website according to the state of the page.

Now we can immediately know the availability property of our page. But the first thing we have to do is listen to this event, so that we can do something accordingly. I have written a simple listener event:

......

......

Read the original: Detect page activity status via HTML5 Visibility API

Detecting page activity status via HTML5 Visibility API