牛骨文教育服务平台(让学习变的简单)

PageVisibility API

1、PageVibility

PageVisibility API是用于判断页面是否处于浏览器的当前窗口,即是否可见。

这API是部署在document对象上的。

1.1 属性

它有两个属性:

  • document.hidden:返回一个布尔值,表示当前是否被隐藏,只读
  • document.visibilityState:只读,表示页面当前的状态,有四个可能值:visibile(页面可见)、hidden(页面不可见)、prerender(页面正处于渲染之中,不可见)、unloaded(如果文档被卸载了)

在使用这两个属性时,要加上不同浏览器的私有前缀:

获取hidden属性值:

function getHiddenProp() {
  var prefixes = ["webkit", "moz", "ms", "o"];
  
  if ( "hidden" in document) return "hidden;
  
  for(var i = 0; i < prefixes.length; i++) {
    var hidden = prefixes[i] + "Hidden";
    if( hidden in document) {
      return hidden;
    }
  };
  
  return null;
}

获取visibilityState属性

function getVisibilityState() {
  var prefixes = ["webkit", "moz", "ms", "o"];
  
  if ( "visibilityState" in document) return "visibilityState;
  
  for(var i = 0; i < prefixes.length; i++) {
    var visibilityState = prefixes[i] + "VisibilityState";
    if( hidden in document) {
      return visibilityState;
    }
  };
  
  return null;
}

1.2 事件

当页面的可见状态发生变化时,会触发visibilityChange事件(也是需要加上私有前缀)

var hidden = getHiddenProp();

var visibilityChange = hidden.split(/[H|h]/, "")[0] + "visibilitychange";

document.addEventListener(visibilityChange, function(){
   console.log( document[getVisibilityState] );
});