QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 2681|回复: 0

[HTML/CSS/JS] 使用 visibilitychange 处理页面关闭事件

[复制链接]

等级头衔

积分成就    金币 : 2841
   泡泡 : 1516
   精华 : 6
   在线时间 : 1295 小时
   最后登录 : 2024-11-23

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老

联系方式
发表于 2022-7-2 17:05:18 | 显示全部楼层 |阅读模式
一、概念( ^" {- B% k2 c' X$ [2 A. l
       visibilitychange事件是浏览器17年前后添加的一个事件,是指当其选项卡的内容变得可见或被隐藏时,会在文档上触发 visibilitychange (能见度更改) 事件。
# T0 w0 m. x3 b5 u       MDN 也有相关属性介绍 MDN Web Docs visibilitychange_event/ q6 I5 [5 v0 V$ L( N3 t
二、使用场景
4 s4 V9 H7 N3 ]8 f+ `       当浏览器的某个标签页切换到后台,或从后台切换到前台时,会在 docment 上触发 visibilityState 事件;现在主流的浏览器都支持该消息了,例如Chrome, Firefox等。出于兼容性原因(Safari 14 之前的版本不支持挂载在 window 上),要在 document 上监听 visibilityState 事件;* z# D& J1 u0 H2 T
       什么时候触发呢? 当用户导航到一个新的页面,改变标签页,关闭标签页,最小化或者关闭浏览器;或者移动端从浏览器换到其他的app。& l2 s; d7 H* v: W" w0 s
       在做页面游戏的时候、播放音视频文件时、在线考试防止考生离开当前页面时、数据上报等场景都时常用到。( l  W/ q, f" `8 w( @3 P$ b
三、使用方法
+ Q, J* b0 K5 m* W4 b       可以利用 document.hidden 的值来进行判断,值类型为 布尔,true 为隐藏,false 为激活。
6 @% _! q  n, d- Z. y' [6 N       基本使用方法如下:
0 z$ k% w; T0 a! t1 q5 F
  1. document.addEventListener("visibilitychange", function(){}, false);
      在项目中当页面离开的时候就关闭查询版本是否更新的定时器,以节约性能,等页面再次激活的时候再次设置定时器。这里只摘取主要逻辑进行说明。
* l( V: o# e6 l) r* H1 T: V& H
  1. const delayTime = 30;
  2. let popupFlag = false;
  3. let interval = null;
  4. document.addEventListener('visibilitychange', checkVisibility);
  5. // 切换页面事件
  6. function checkVisibility() {
  7.   if (popupFlag) return;
  8.   if (document.hidden) {
  9.     // 离开时
  10.     clearInterval(interval);
  11.     interval = null;
  12.   } else {
  13.     // 防止10秒之内频繁切换
  14.     debounce(createInterval(checkVersion), 10000);
  15.   }
  16. }
  17. // 检查版本
  18. function checkVersion() {
  19.     //业务逻辑省略...
  20. }
  21. // 创建定时器
  22. function createInterval(callback) {
  23.   interval = setInterval(callback, delayTime * 1000);
  24. }
  25. function debounce(fn, delay) {
  26.   //记录上一次的延时器
  27.   let timer = null;
  28.   return function () {
  29.     //清除上一次的演示器
  30.     clearTimeout(timer);
  31.     //重新设置新的延时器
  32.     timer = setTimeout(() => {
  33.       //修正this指向问题
  34.       fn.apply(this);
  35.     }, delay);
  36.   };
  37. }
四、注意+ a. m& }& E  P' K
       现在某些浏览器还保留了visibilitychange的前缀,例如Chrome浏览器还保留着webkit前缀,不过该事件已经趋于稳定,在Chrome 33及以后就去掉了前缀,直接使用visibilitychange。
7 t2 Q0 }+ s, k# P9 F4 I注:
6 h/ y. ~& c4 g(1)微信内置的浏览器因为没有标签,所以不会触发该事件。( g# v2 ^/ Y; }' V( d' B
(2)手机端直接按Home键回到桌面,也不会触发该事件。$ J- g1 k  V' P9 ^
(3)PC端浏览器失去焦点不会触发该事件,但是最小化,或回到桌面会触发。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2024-11-23 20:23

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表