HTML5中怎么判断用户是否正在浏览页面-创新互联

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

成都创新互联公司长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为克拉玛依企业提供专业的成都做网站、成都网站制作、成都外贸网站建设，克拉玛依网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

现在，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";
 }

// 添加监听器，在title里显示状态变化
 document.addEventListener(visibilityChange, function() {
 document.title = document[state];
 }, false);

// 初始化
 document.title = document[state];

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

分享名称：HTML5中怎么判断用户是否正在浏览页面-创新互联
网站地址：http://shouzuofang.com/article/cecipo.html