h5教程html5中页面可见性的判断(附代码)

 所属分类:web前端开发

 浏览:148次-  评论: 0次-  更新时间:2022-10-24
描述:更多教程资料进入php教程获得。 本篇文章给大家带来的内容是关于html5里页面可见性的判断(附代码),有一定的参考价值,有需要的朋友可以...
更多教程资料进入php教程获得。 本篇文章给大家带来的内容是关于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);
});
登录后复制

相关文章推荐:

PHP中抽象方法以及抽象类与接口的简单介绍

什么是容器(Container)和门面(Facade)?thinkphp5.1中容器和门面的浅析

thinkphp模板如何判断是手机微信支付还是微信扫码支付

以上就是html5中页面可见性的判断(附代码)的详细内容,更多请关注zzsucai.com其它相关文章!

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!