前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浏览器标签tab窗口切换时事件状态侦听

浏览器标签tab窗口切换时事件状态侦听

作者头像
joshua317
发布2021-08-31 18:01:03
2.3K0
发布2021-08-31 18:01:03
举报
文章被收录于专栏:技术博文

浏览器标签tab窗口切换时事件状态侦听

背景

项目中使用到了websocket,用户在浏览器窗口切换或者浏览器最下话后,websocket的状态有可能断开,且没有重试机制,所以想通过用户回到当前页面的时候,系统能够自动刷新,重新连接socket

解决方法

通过添加浏览器的监听事件,判断用户是否离开了当前的页面。

代码语言:javascript
复制
document.addEventListener('visibilitychange', function() {
    var isHidden = document.hidden;
    if (isHidden) {//切离该页面时执行
        alert("浏览器处于最小化状态了");
        document.title = '当焦点不在当前窗口时的网页标题';
    } else {//切换到该页面时执行
        alert("页面处于当前状态了");
        document.title = '再变回来或者做点其他的';
    }
});

具体使用

判断用户重新回到当前页面的时候,进行页面刷新

代码语言:javascript
复制
document.addEventListener('visibilitychange', function() {
    var isHidden = document.hidden;
    if (isHidden) {//切离该页面时执行
        //页面切换时,处理逻辑
    } else {//切换到该页面时执行
        //页面回来时的逻辑处理,此处是进行了刷新
        location.reload(); //刷新页面
        //window.location.reload()
    }
});

document.visibilityState的值为:

hidden(当浏览器最小化、切换tab、电脑锁屏时) visible(用户正在查看当前页面时) prerender(文档加载离屏或者不可见) unloaded(当文档将要被unload时)

本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/53

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-08-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 浏览器标签tab窗口切换时事件状态侦听
    • 背景
      • 解决方法
        • 具体使用
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档