JS monitor the browser switch between each tab

Have seen some of the Web page, when the label switch to another address, the title on the page will change, has not known how this is done, recently checked some information to find a Visibilitychange event can be done, here will introduce the page visibility Visibility) API's simple application.

Visibilitychange Event Introduction

Simply put, when a user minimizes a Web page or moves to another label, the API sends Visibilitychange events about the visibility of the page. You can detect the event and perform some action or behavior. For example: When the tab is hidden, stop playing music video, stop some unnecessary polling, and stop some looping animations such as Carousel. These can save the server and local overhead.

Case

• The site has a picture carousel and should not advance to the next slide unless the user is viewing the page.

• Applications that display information dashboards do not want to poll the server for updates when the page is not visible.

• The Web page detects whether it is pre-rendered so that it can accurately calculate page views.

In the past, developers often registered onblur and onfocus to detect whether a page is active, but it does not tell you that the page is hidden from the user. The Page Visibility API solves this problem.

Browser compatibility

This event has been widely supported by modern browsers, but some older browsers need to prefix them.

Chrome (Webkit)	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
13 prefix WebKit 33 No Prefix required	10 prefix Moz 18 No prefix required	10 prefix ms	12.10	7

Visibility Properties for document

Page Visibility (Second Edition) defines 2 read-only document properties:hidden and visibilitystate.

Where Document.hidden is a Boolean value that simply means that the tab page is displayed or hidden. The document.visibilitystate attribute is more detailed and currently has four possible values:

Visible: The page content is at least partially visible. This means that in reality, the page is a visible tab of a non-minimized window.

Hidden : The page content is not visible to the user. In fact, this means that the document is part of a background tab or a minimized window, or when the system lock screen is in the state.

prerender : The page content is pre-rendered and the user is not visible.

unloaded : If the document is unloaded, the value will be returned.

In general, we use Document.hidden to meet the usual needs.

In order to support the old version of the browser, we need to do some prefix processing on document.hidden :

Again, we can get the document.visibilitystate property:

This allows us to write a cross-browser function to check if the document is visible.

Visibilitychange Monitoring Events

You can register a listener visibilitychange event on the document object, depending on the document.hidden or The Document.visibilitystate property does some business logic:

The above code modifies the value of document.title when the visibility of the page changes.

Http://www.yduba.com/qianduan-1491588986.html

Https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

JS monitor the browser switch between each tab