visibilitychange事件判断当前页面——可见性的状态

document.hidden
这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。

document.visibilityState
visibilityState的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。).

visibilitychange事件
监听页面可见性变化非常容易:

window.onload = function() { var hidden, state, visibilityChange, title = document.title; // 各种浏览器兼容 if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState" } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState" } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState" } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState" } // 添加监听器,在title里显示状态变化 document.addEventListener(visibilityChange, function() { if (document[state] == "hidden") { document.title = "出bug了,快看!" } else { document.title = title } }, false) } 上面的代码会在页面可见性发生变化时修改document.title的值!

那么,什么时候需要使用visibilitychange事件呢?比如,如果你的页面上有嵌入视频正在播放,当用户切换到其它标签页时,你的标签页上的视频应自动暂停播放,当用户切换回来时继续接着播放。再比如,如果你的页面有自动刷新动作,当用户切换到其它标签页时,你就应该停止刷新,而当用户切换回来时继续之前的动作。

** 需要注意的是: 页面跳转之后的返回当前页不会触发本事件**


 上一篇
Date.parse()方法在安卓和苹果手机上的不同表现 Date.parse()方法在安卓和苹果手机上的不同表现
经过手动测试得知: 安卓手机:会正常返回毫秒数,只要是符合要求的时间字符串即可,要求比较宽松。 苹果手机:会返回NaN。形如2018-07-24 23:17:43的时间字符串的格式不被支持,不符合标准。经过查阅资料得知: 语法://显式
下一篇 
MIME类型大全 MIME类型大全
NameMIME Type / Internet Media TypeFile ExtensionMore Details3D Crossword Pluginapplication/vnd.hzn-3d-crossword.x3dIANA
  目录