这是我第10篇简书。
Document.visibilityState:
-
visible
: 当前页面可见. 即此页面在前景标签页中,并且窗口没有最小化. -
hidden
: 页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' . -
prerender
: 页面此时正在渲染中, 因此是不可见的. 文档只能从此状态开始,永远不能从其他值变为此状态.注意: 浏览器支持是可选的. -
unloaded
: 页面从内存中卸载清除. 注意: 浏览器支持是可选的.
前两个用的最多, 用visibilitychange事件进行监听。
document.addEventListener("visibilitychange", function() {
if(document.visibilityState === "visible"){
console.log("hello,dxl")
}
if(document.visibilityState === "hidden"){
console.log("离开当前页")
}
});
应用场景:
监控用户行为,用户进行页面间的切换时,用visibilityState 的状态来进行对应的操作。
例如:
- 当前页不可见,用户的视角不在当前页面时,暂停加载广告,幻灯片、停止加载视频、开始加载小动画等。减少对用户宽带的占用,减少服务器压力,节省用户内存,以及到达更好的播放效果。
- 或者,当页面切换时动态改变document.title页面的标题,例如视角不在那个页面时来了提示信息,当切换到那个页面时,那个页面的title消息提示消失恢复原样,这些应用场景就需要visibilityState 了。