html5中判断当前页面可见性状态的方法-创新互联

这篇文章主要介绍了html5中判断当前页面可见性状态的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

专注于为中小企业提供成都网站制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业沧县免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务

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];

添加监听

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);
});

感谢你能够认真阅读完这篇文章，希望小编分享html5中判断当前页面可见性状态的方法内容对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，遇到问题就找创新互联建站，详细的解决方法等着你来学习!

网站名称：html5中判断当前页面可见性状态的方法-创新互联
标题网址：http://bjjierui.cn/article/eoopc.html