Page Visibility adds two properties, hidden, and visibilitystate to the browser's Document object. If the current label is active, then the value of Document.hidden is false, otherwise true. Visibilitystate has 4 possible values
1.hidden: Visibilitystate value is hidden when the browser is minimized, switch tags, computer lock screen
2.visible: When the document of the top-level context of the browser is displayed in at least one screen, the visible is returned when the browser window is not minimized, but the browser is obscured by other applications.
3.prerender: Returns PreRender when the document is loaded outside the screen or is not visible, this is a non-essential property, the browser can selectively support.
4.unloaded: Returns unloaded when the document is about to be left (unload), and the browser can optionally support this property
Additionally, the Visibilitychange event is added to document, triggering the event when the visibility of the document changes.
Browser support with private prefixes
/*! * Pagevisibility.js by Zhangxinxu 2012-11-29**/varPagevisibility =(function () {varPrefixsupport; varIspagevisibilitysupport =(function () {varSupport =false; if(typeofWindow.screenx = = =" Number") { ["WebKit","Moz","Ms","o",""].foreach (function (prefix) {if(Support = =false&& document[prefix + ' Hidden ']! =undefined) {Prefixsupport=prefix; Support=true; } }); } returnSupport ; })(); varIshidden =function () {if(ispagevisibilitysupport) {returndocument[prefixsupport+"HIdden"]; } returnundefined; }; varVisibilitystate =function () {if(ispagevisibilitysupport) {returndocument[prefixsupport+"Visibilitystate"]; } returnundefined; }; return{Hidden:ishidden (), Visibilitystate:visibilitystate (), Visibilitychange:function (FN, usecapt Ure) {Usecapture= Undefined | |false; if(Ispagevisibilitysupport &&typeoffn = = ="function") { returnDocument.addeventlistener (Prefixsupport +"Visibilitychange", Function (evt) { This. Hidden =Ishidden (); This. visibilitystate =visibilitystate (); Fn.call ( This, EVT); }.bind ( This), usecapture); } returnundefined; } }; }) (undefined);
The test found that the following browsers are supported :
- Chrome 21
- FireFox 16.0.2
- Opera 12.11
- IE10
Reference: http://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/
Page Visibility Raw page Visibility