浏览器窗口切换触发事件(多窗口用户同步退出)

前几天在前端开发的时候遇到一个需求场景:用户打开了窗口A 和窗口B,当用户在窗口B退出到登陆页面了,那么A窗口也要同步退出到登录页面。这样的需求,第一想到的就是使用websocket,当窗口B退出,通知A也退出。但是用websocket代价有点大,涉及到后端,事件紧。最终考虑,但B窗口退出,用户切换到A窗口,再主动退出。

浏览器窗口切换事件

document.addEventListener("visibilitychange", () => {
     // visible-显示,hidden-隐藏
      if (document.visibilityState === "visible") {
       
      }
    });

我是再本地localstorage存了一个标志,当用户退出,本地标志清除,然后再有一堆判断逻辑。

 document.addEventListener("visibilitychange", () => {
     // '窗口切换事件激活visible-显示,hidden-隐藏
      if (document.visibilityState === "visible") {
      //下面就是一堆判断用户是否在线的逻辑
        //.......
      }
    });

    原文作者:28岁学前端-渣仔一枚
    原文地址: https://blog.csdn.net/m0_46750297/article/details/123568553
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞