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

张子凡 设计开发 8个月前 (09-19) 阅读(3471) 评论(6)

最近子凡在开发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

发表评论

  1. 小李子
    1楼
    小李子 5个月前 (01-04)

    可以根据这个原理,做一个监听用户在活动窗口浏览页面多长时间吗?

    • 张子凡
      回复
      张子凡 5个月前 (01-04)
      回复 @小李子 :理论上是可以做的,但是几乎没有什么实际的可用性和必要性。
  2. 卢松松商城
    2楼
    卢松松商城 8个月前 (09-23)

    你这个网站的弹幕都是的,不过是有眼前一亮的感觉

  3. LeeJon
    3楼
    LeeJon 8个月前 (09-21)

    这个是不是可以用在监听在线用户数量?

    • 张子凡
      回复
      张子凡 8个月前 (09-21)
      回复 @LeeJon :这个只是监听用户当前页面标签是否为活动窗口而已
  4. 松松软文发布
    4楼
    松松软文发布 8个月前 (09-19)

    从百度点进来的,支持一下,希望您多出好文章