Html5-document.visibilitystate

Document.hidden

This newly-appearing document.hidden property, which shows whether the page is the user's currently viewing page, has a value of ture or false.

Document.visibilitystate

visibilityStateThe value is either visible (indicates that the page is currently active tab for the browser and the window is not minimized), either (the page is not the Active hidden tab page, or the window is minimized.) ), or prerender (the page is regenerated, not visible to the user.) ).

Visibilitychange Events

Monitoring page Visibility changes is easy:

Various browsers compatible with VAR hidden, state, visibilitychange; if (typeof Document.hidden!== "undefined") {hidden = "hidden"; visibilitychange = "Visibilitychange"; state = "Visibilitys Tate ";} else if (typeof Document.mozhidden!== "undefined") {hidden = "Mozhidden"; visibilitychange = "Mozvisibilitychange"; state = "Mozvisibilitystate";} else if (typeof Document.mshidden!== "undefined") {hidden = "Mshidden"; visibilitychange = "Msvisibilitychange"; state = "M Svisibilitystate ";} else if (typeof Document.webkithidden!== "undefined") {hidden = "Webkithidden"; visibilitychange = " Webkitvisibilitychange "; state =" Webkitvisibilitystate ";} Add listener, show state change in title Document.addeventlistener (Visibilitychange, function () {document.title = Document[state];}, FALSE);//Initialize document.title = Document[state];

The above code will change document.title the value of the page when the visibility changes!

So, when do you need to use visibilitychange events? For example, if you have an embedded video on your page that is playing, when the user switches to another tab, the video on your tab should automatically pause and continue playing when the user switches back. For example, if your page has an automatic refresh action, when the user switches to another tab, you should stop the refresh and continue the previous action when the user switches back.

Hungry is in use, did a title reminder, you can go to see (Toggle tab).

Html5-document.visibilitystate