visibility API

这是一篇简短的小博文，介绍检测页面是否可见的API。

参考 https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

document.hidden：如果页面可见返回true，否则返回false

document.visibilityState：返回状态字符串，可见visible，不可见hidden。文档上还写了prerender和unloaded。

visibilitychange事件在页面可见性变化时触发。切换标签、最小化窗口会触发，但是如果打开网页状态下开启其他应用不会触发。

下面是兼容代码：

var hidden,visibilityChange
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
	console.log(document.visibilityState)
	if (document[hidden]) {
		hiddenFun() //这里是要执行的函数
	}else {
		visibleFun() //这里是要执行的函数
	}
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);