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

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

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

背景

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

解决方法

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

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

具体使用

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

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