一、概念
7 |1 q7 v; F5 x2 i1 _ visibilitychange事件是浏览器17年前后添加的一个事件,是指当其选项卡的内容变得可见或被隐藏时,会在文档上触发 visibilitychange (能见度更改) 事件。
) I) [: w; F: \' U; A( D MDN 也有相关属性介绍 MDN Web Docs visibilitychange_event* o$ j3 s4 b) X4 x& K, M, o( E
二、使用场景
9 d3 F2 a, ^( _1 X3 a8 i5 U 当浏览器的某个标签页切换到后台,或从后台切换到前台时,会在 docment 上触发 visibilityState 事件;现在主流的浏览器都支持该消息了,例如Chrome, Firefox等。出于兼容性原因(Safari 14 之前的版本不支持挂载在 window 上),要在 document 上监听 visibilityState 事件;
% T0 a# e) P7 o- u. B2 \ 什么时候触发呢? 当用户导航到一个新的页面,改变标签页,关闭标签页,最小化或者关闭浏览器;或者移动端从浏览器换到其他的app。! [' w( W) c I2 I
在做页面游戏的时候、播放音视频文件时、在线考试防止考生离开当前页面时、数据上报等场景都时常用到。+ e' t4 h: q+ j3 C. B2 x
三、使用方法
$ \/ I2 f+ z1 y1 e" } 可以利用 document.hidden 的值来进行判断,值类型为 布尔,true 为隐藏,false 为激活。
4 o% F% F Y% [ 基本使用方法如下:
' E! f) ]% r/ `' L e
- document.addEventListener("visibilitychange", function(){}, false);
在项目中当页面离开的时候就关闭查询版本是否更新的定时器,以节约性能,等页面再次激活的时候再次设置定时器。这里只摘取主要逻辑进行说明。
4 Y/ P4 C% k7 B5 c$ i: \3 y- const delayTime = 30;
- let popupFlag = false;
- let interval = null;
-
- document.addEventListener('visibilitychange', checkVisibility);
-
- // 切换页面事件
- function checkVisibility() {
- if (popupFlag) return;
- if (document.hidden) {
- // 离开时
- clearInterval(interval);
- interval = null;
- } else {
- // 防止10秒之内频繁切换
- debounce(createInterval(checkVersion), 10000);
- }
- }
-
- // 检查版本
- function checkVersion() {
- //业务逻辑省略...
- }
-
- // 创建定时器
- function createInterval(callback) {
- interval = setInterval(callback, delayTime * 1000);
- }
-
- function debounce(fn, delay) {
- //记录上一次的延时器
- let timer = null;
- return function () {
- //清除上一次的演示器
- clearTimeout(timer);
- //重新设置新的延时器
- timer = setTimeout(() => {
- //修正this指向问题
- fn.apply(this);
- }, delay);
- };
- }
四、注意
, A# D7 G8 [0 m, s+ {) `9 f3 ` 现在某些浏览器还保留了visibilitychange的前缀,例如Chrome浏览器还保留着webkit前缀,不过该事件已经趋于稳定,在Chrome 33及以后就去掉了前缀,直接使用visibilitychange。
% n" p6 q" d( I1 R注: * i7 B+ ?' s; F) U ] y0 J
(1)微信内置的浏览器因为没有标签,所以不会触发该事件。
) H$ W- P, f+ }(2)手机端直接按Home键回到桌面,也不会触发该事件。 * J* S2 c" S ~. D+ Y5 w* S- E8 ^
(3)PC端浏览器失去焦点不会触发该事件,但是最小化,或回到桌面会触发。 |