HTML5 — Page Visibility(页面可见性)

如果 页面最小化了 或者 隐藏在了其他标签页后面,那么有些功能是可以停下来的,比如轮询服务器或者某些动画效果H5 引入的 Page Visibility API,能很有效地帮助我们完成。

这个 API 本身非常简单,由以下三部分组成:

一、document.hidden:
表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化(注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)
二、document.visibilityState:
表示下面 4 个可能状态的值:
1)hidden:页面在后台标签页中或者浏览器最小化
2)visible:页面在前台标签页中
3)prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true
4)unloaded:页面正在从内存中卸载
三、Visibilitychange 事件:
当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。

我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 或者document.visibilityState的值,根据该值进行页面一些事件的处理。
1)

document.addEventListener('visibilitychange', function() {
  var isHidden = document.hidden;
  if (isHidden) {
// 动画停止
// 服务器轮询停止 等等
  } else {
// 动画开始
// 服务器轮询
  }
});

2)

document.addEventListener("visibilitychange", function () {
var visibilityState = document.visibilityState;
    if (visibilityState == "visible") {
        console.log("欢迎回来!");
        console.log(document.visibilityState)
//do something
//继续视频播放
    }
    if (visibilityState == "hidden") {
        console.log("不要走!");
        console.log(document.visibilityState);
//do something else
//暂停视频播放
    }
})

提供一个兼容各高级浏览器以及低版本 IE 写法(低版本 IE 用 onfocus/onblur 兼容):

(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
 document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
window.onpageshow = window.onpagehide
= window.onfocus = window.onblur = onchange;

  function onchange (evt) {
var v = "visible", h = "hidden",
    evtMap = {
      focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
    };

evt = evt || window.event; 
if (evt.type in evtMap)
  document.body.className = evtMap[evt.type];
else
  document.body.className = this[hidden] ? "hidden" : "visible";
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
onchange({type: document[hidden] ? "blur" : "focus"});
})();

你可能感兴趣的:(HTML5 — Page Visibility(页面可见性))