大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://dzwzjz.com/article/eoopc.html
在线咨询
服务热线
服务热线:028-86922220
TOP