Page Visibility API

不知道用户是不是正在与页面交互，这是困扰广大 Web 开发人员的一个主要问题。如果页面最小化了或者隐藏在了其他标签页后面，那么有些功能是可以停下来的，比如轮询服务器或者某些动画效果。
Page Visibility API（页面可见性 API）就是为了让开发人员知道页面是否对用户可见而推出的。

• document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览
  器最小化。
• document.visibilityState：表示下列 4 个可能状态的值。
  • 页面在后台标签页中或浏览器最小化。
  • 页面在前台标签页中。
  • 实际的页面已经隐藏，但用户可以看到页面的预览（就像在 Windows 7 中，用户把鼠标移动到任务栏的图标上，就可以显示浏览器中当前页面的预览）。
  • 页面在屏幕外执行预渲染处理。
• visibilitychange 事件：当文档从可见变为不可见或从不可见变为可见时，触发该事件。

检查浏览器是否支持

function isHiddenSupported(){ 
	return typeof (document.hidden || document.msHidden || document.webkitHidden) != "undefined"; 
}

检测页面是否隐藏

if (document.hidden || document.msHidden || document.webKitHidden){ 
 //页面隐藏了
} else { 
 //页面未隐藏
}

为了在两个浏览器中都能侦听到该事件，可以像下面的例子一样，为每个事件都指定相同的事件处理程序：

// EventUtil 的对象，来处理浏览器间的差异(跨浏览器的事件处理程序)
   var EventUtil = {
      addHandler: function (element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
          element.attachEvent("on" + type, handler);
        } else {
          element["on" + type] = handler;
        }
      },
      removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
          element.detachEvent("on" + type, handler);
        } else {
          element["on" + type] = null;
        }
      }
    };

function handleVisibilityChange(){ 
 var output = document.getElementById("output"), 
 msg; 
 if (document.hidden || document.msHidden || document.webkitHidden){ 
 msg = "Page is now hidden. " + (new Date()) + "<br>"; 
 } else { 
 msg = "Page is now visible. " + (new Date()) + "<br>"; 
 } 
 output.innerHTML += msg; 
} 
//要为两个事件都指定事件处理程序
EventUtil.addHandler(document, "msvisibilitychange", handleVisibilityChange); 
EventUtil.addHandler(document, "webkitvisibilitychange", handleVisibilityChange);

建议大家先不要完全依赖带前缀的 document.visibilityState，最好只使用 document.hidden 属性。