本篇文章给大家带来的内容是关于html5里页面可见性的判断(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务
document.hidden新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。
document.visibilitystatevisibilitystate的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。).
visibilitychange事件// 各种浏览器兼容 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中页面可见性的判断(附代码)的详细内容。