JS判断用户是否正在浏览当前网页标签

张子凡 设计开发 2016-09-19 15:03:37 阅读(...) 评论(7)

最近子凡在开发WordPress评论弹幕插件的时候就需要判断用户是否正在浏览当前网页活着当前标签,后来发现HTML5里页面可见性接口就提供了一个方法,使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。

JavaScript

document.hidden

这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。

document.visibilityState

visibilityState的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。).

visibilitychange事件

监听页面可见性变化非常容易:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//网页当前状态判断
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";
}
// 添加监听器,在title里显示状态变化
document.addEventListener(visibilityChange, function() {
	document.title = document[state];
}, false);
//初始化页面状态
document.title = document[state];

以上代码摘自互联网,代码会在页面可见性发生变化时修改document.title的值!使用这个方法可以控制离开当前页面活动状态时实现视频的暂停播放,更多的功能等你去挖掘和尝试。

不过很遗憾的是没办法兼容IE,这一点比较尴尬,所以子凡开发的WordPress评论弹幕插件也就直接抛弃了IE。

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/document-hidden.html

留言评论

登录 后留言