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的一个简单导航栏实现
Aug 03 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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
Laravel 5框架学习之环境与配置
2015/04/08 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
jquery 使用点滴函数代码
2011/05/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
Vue实现图书管理案例
2021/01/20 Vue.js
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python基于PycURL实现POST的方法
2015/07/25 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
使用python实现BLAST
2018/02/12 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
举例讲解Python常用模块
2019/03/08 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
会议活动邀请函
2014/01/27 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
委托书的写法
2014/09/16 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技