HTML5中怎么判断用户是否正在浏览页面

本篇文章为大家展示了HTML5中怎么判断用户是否正在浏览页面，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

现在，HTML5里页面可见性接口就提供给了程序员一个方法，让他们使用visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。

document.hidden

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

document.visibilityState

visibilityState的值要么是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";
 }</p> <p>// 添加监听器，在title里显示状态变化
 document.addEventListener(visibilityChange, function() {
 document.title = document[state];
 }, false);</p> <p>// 初始化
 document.title = document[state];

上述内容就是HTML5中怎么判断用户是否正在浏览页面，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。