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动画按钮的实例教程
Nov 21 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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
php动态生成JavaScript代码
2009/03/09 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python3中sys.argv的实例用法
2020/04/24 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
开学第一天的感想
2015/08/10 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Linux中如何安装并部署Redis
2022/04/18 Servers