HTML5中判断用户是否正在浏览页面的方法


Posted in HTML / CSS onMay 03, 2014

现在,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";
}</p> <p>// 添加监听器,在title里显示状态变化
document.addEventListener(visibilityChange, function() {
document.title = document[state];
}, false);</p> <p>// 初始化
document.title = document[state];

上面的代码会在页面可见性发生变化时修改document.title的值!

那么,什么时候需要使用visibilitychange事件呢?比如,如果你的页面上有嵌入视频正在播放,当用户切换到其它标签页时,你的标签页上的视频应自动暂停播放,当用户切换回来时继续接着播放。再比如,如果你的页面有自动刷新动作,当用户切换到其它标签页时,你就应该停止刷新,而当用户切换回来时继续之前的动作。

HTML / CSS 相关文章推荐
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 #HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 #HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 #HTML / CSS
HTML5中5个简单实用的API
Apr 28 #HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
总结js函数相关知识点
2018/02/27 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
scrapy爬虫实例分享
2017/12/28 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python学习开发mock接口
2019/04/28 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
全球性的在线商店:Vogca
2019/05/10 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
学生打架检讨书
2014/02/14 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
班级团队活动方案
2014/08/14 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL