所属分类:web前端开发
visibilitychange
页面事件来判断当前页面可见性的状态,并针对性的执行某些任务
新出现的document.hidden
属性,它显示页面是否为用户当前观看的页面,值为ture或false。
visibilityState
的值要么是visible
(表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden
(页面不是当前激活tab页面,或者窗口最小化了。),或者prerender
(页面在重新生成,对用户不可见。).
// 各种浏览器兼容 var hidden, state, visibilityChange;
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() {
document.title = document[state]; }, false);
// 初始化
document.title = document[state];
登录后复制
添加监听
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
document.addEventListener("msvisibilitychange", function() {
console.log( document.msVisibilityState);
});
document.addEventListener("mozvisibilitychange", function() {
console.log( document.mozVisibilityState);
});
document.addEventListener("webkitvisibilitychange", function() {
console.log( document.webkitVisibilityState);
});
登录后复制
相关文章推荐:
PHP中抽象方法以及抽象类与接口的简单介绍
什么是容器(Container)和门面(Facade)?thinkphp5.1中容器和门面的浅析
thinkphp模板如何判断是手机微信支付还是微信扫码支付
以上就是html5中页面可见性的判断(附代码)的详细内容,更多请关注zzsucai.com其它相关文章!