一、概念) O0 d, ?! [# @* q8 ^* g
visibilitychange事件是浏览器17年前后添加的一个事件,是指当其选项卡的内容变得可见或被隐藏时,会在文档上触发 visibilitychange (能见度更改) 事件。8 h4 t3 T$ K% v, C/ W8 U
MDN 也有相关属性介绍 MDN Web Docs visibilitychange_event5 k. G. ?. w4 X+ t) n
二、使用场景
4 Z7 @/ p% q4 K v 当浏览器的某个标签页切换到后台,或从后台切换到前台时,会在 docment 上触发 visibilityState 事件;现在主流的浏览器都支持该消息了,例如Chrome, Firefox等。出于兼容性原因(Safari 14 之前的版本不支持挂载在 window 上),要在 document 上监听 visibilityState 事件;
+ k( g9 x7 F2 |# a+ d! [6 ? 什么时候触发呢? 当用户导航到一个新的页面,改变标签页,关闭标签页,最小化或者关闭浏览器;或者移动端从浏览器换到其他的app。6 r% R2 ]2 h6 `7 P3 W/ H) j
在做页面游戏的时候、播放音视频文件时、在线考试防止考生离开当前页面时、数据上报等场景都时常用到。
0 F$ P: t: _. n; x" A8 _1 f7 u' [三、使用方法
* W) `4 G& I" R; E5 Q/ g 可以利用 document.hidden 的值来进行判断,值类型为 布尔,true 为隐藏,false 为激活。
* h( \( ?( P: ^0 @, J' d 基本使用方法如下:6 ~6 B- f7 R8 h, K- C# E% c
document.addEventListener("visibilitychange", function(){}, false); 在项目中当页面离开的时候就关闭查询版本是否更新的定时器,以节约性能,等页面再次激活的时候再次设置定时器。这里只摘取主要逻辑进行说明。4 l9 R4 I0 {" _3 Y/ R4 b J# V
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);
};
} 四、注意. X# J) H6 Z5 r" \
现在某些浏览器还保留了visibilitychange的前缀,例如Chrome浏览器还保留着webkit前缀,不过该事件已经趋于稳定,在Chrome 33及以后就去掉了前缀,直接使用visibilitychange。 l! |) P8 a" x' X6 l2 c4 `0 I/ q
注:
6 M2 G4 L8 M$ J* _( T(1)微信内置的浏览器因为没有标签,所以不会触发该事件。: F- s9 \* D5 K
(2)手机端直接按Home键回到桌面,也不会触发该事件。) t4 j+ J! {0 W* h/ j/ H, o
(3)PC端浏览器失去焦点不会触发该事件,但是最小化,或回到桌面会触发。 |