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

发表评论

  1. 玩蛇
    1楼
    玩蛇 9个月前 (03-28)

    大佬

  2. 小李子
    2楼
    小李子 2年前 (2017-01-04)

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

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

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

  4. LeeJon
    4楼
    LeeJon 2年前 (2016-09-21)

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

    • 张子凡
      回复
      张子凡 2年前 (2016-09-22)
      回复 @LeeJon :这个只是监听用户当前页面标签是否为活动窗口而已
  5. 松松软文发布
    5楼
    松松软文发布 2年前 (2016-09-20)

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