-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-07-25
来源 ：
阅读 3733
评论 0
摘要：本篇教程探讨了HTML5 visibilityChange事件，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
本篇教程探讨了HTML5 visibilityChange事件，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
visibilitychange事件在当前网页在可见和不可见之间变换的时候调用，注意，是网页整体可见和不可见，不是网页刷新或者关闭或者其他操作跳转而不可见，是没有对网页本身操作。比如用户正在刷微博，刷到一半切去看视频了，这个时候微博就能通过visibilitychange发现用户没有看自己了，可以根据实际需要暂停请求或者一些别的操作，等用户切回来的时候继续加载。
通过document的hidden属性可以判断标签是否可见。true时代表标签不可见。
这个事件适合在标签不可见的时候减少网络请求、服务器压力等，也可以做一些好玩的事情，比如改变网页标题的文字。
document.addEventListener("visibilitychange webkitvisibilitychange", function(){
var tag = document.hidden || document.webkitHidden;
if (tag) {
alert('走了')
}else{
alert('来了')
}
});
有的同学可能会和pagehide事件混淆，pagehide事件的定义是用户离开网页时触发，离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。这个事件是用户在当前网页进行操作时触发的。例如当你点击关闭网页时，会弹出 是否要关闭这个网页 的confirm弹框，或者点击页面内一个链接，网页会弹出是否跳转的confirm弹框，也就是你的事件操作会让这个页面消失，就会触发pagehide 事件。而visibilitychange事件是用户转移到另一个窗口并且当前页面还会存在的情况下触发的。
本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 5
不喜欢 | 5
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
