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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 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 字符串替换的方法
2012/01/10 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
js中的闭包实例展示
2018/11/01 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python实现Kmeans聚类算法
2020/06/10 Python
浅析Python四种数据类型
2018/09/26 Python
Python补齐字符串长度的实例
2018/11/15 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
车工岗位职责
2013/11/26 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Pytorch中的数据集划分&正则化方法
2021/05/27 Python