最近做了一次在线考试，觉得有个HTML5的API很有趣，便研究了一番。
主要用于浏览器切换tab标签页时会触发。

visibilitychange事件

1
document.addEventListener("visibilitychange", function(e) {}, false);

触发这个事件，会关联两个属性

document.visibilityState

返回四种状态：

  • visible
    页面至少显示一部分，在实践中代表页面在非最小化窗口最前面的位置。
  • hidden
    页面内容对用户是不可见的。
    有三种情况：
    • 浏览器是最小化。（The User Agent is minimized.）
    • 浏览器不是最小化，但是该页面在浏览器中的后台tab中，即不是当前选中可见窗口中。（The User Agent is not minimized, but the page is on a background tab.）
    • 操作系统锁定屏幕显示。（The Operating System lock screen is shown.）
  • prerender
    正在prerendered页面内容和用户是不可见的(考虑隐藏document.hidden的目的)。文档可能会在这种状态下,但永远不会过渡到另一个值。注意:浏览器支持是可选的。
  • unload
    页面被从内存中卸载。注意:浏览器支持是可选的。

document.hidden

返回 boolean 值， true 或者 false;
ture 时，表示页面已不在当前窗口
false 时， 表示页面正在当前窗口

兼容写法

1
2
3
4
5
6
7
8
9
10
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

兼容版本

  • Chrome 13-33
  • FireFox 16，18
  • safari 7
  • Opera 12.10
  • IE10

相关链接

W3C Page Visibility API
MDN Page Visibility API
Page Visibility(页面可见性) API介绍、微拓展

demo地址

https://ejayyoung.github.io/page-visibility-demo/demo.html