visibilitychange事件在当前网页在可见和不可见之间变换的时候调用,注意,是网页整体可见和不可见,不是网页刷新或者关闭或者其他操作跳转而不可见,是没有对网页本身操作。比如用户正在刷微博,刷到一半切去看视频了,这个时候微博就能通过visibilitychange发现用户没有看自己了,可以根据实际需要暂停请求或者一些别的操作,等用户切回来的时候继续加载。
通过document的hidden属性可以判断标签是否可见。true时代表标签不可见。
这个事件适合在标签不可见的时候减少网络请求、服务器压力等,也可以做一些好玩的事情,比如改变网页标题的文字。
document.addEventListener("visibilitychange webkitvisibilitychange", function(){
var tag = document.hidden || document.webkitHidden;
if (tag) {
alert('走了')
}else{
alert('来了')
}
});
有的同学可能会和pagehide事件混淆,pagehide事件的定义是用户离开网页时触发,离开网页有多种方式。如点击一个链接,刷新页面,提交表单,关闭浏览器等。这个事件是用户在当前网页进行操作时触发的。例如当你点击关闭网页时,会弹出 是否要关闭这个网页 的confirm弹框,或者点击页面内一个链接,网页会弹出是否跳转的confirm弹框,也就是你的事件操作会让这个页面消失,就会触发pagehide 事件。而visibilitychange事件是用户转移到另一个窗口并且当前页面还会存在的情况下触发的。
网友评论