js获取浏览器活跃页面，切换tab页状态

 

业务需求：同一个浏览器登录不同账号，利用cookie缓存用户信息冲突，返回先登录用户页面数据错误

改变状态：新账号登录后返回页面后刷新出最新用户信息数据

首先搜了下网上常见的方式

methods: {
  handleWinFocus() {
    window.localtion.reload()
  },
},
mounted() {
  window.addEventListener('focus', this.handleWinFocus);
},
beforeDestroy() {
  window.removeEventListener('focus', this.handleWinFocus);
},

另外一种不常见方式，贼好用

if (document.hidden !== undefined) {
 document.addEventListener('visibilitychange', () => {
     if(!document.hidden){
       window.location.reload()
     }
   })
}

　　document.hidden属性：bool型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化。

　　visibilitychange事件：当文档的可见性改变时触发。

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
 
// 添加监听器
document.addEventListener(visibilityChange, function() {
    console.log("当前页面是否被隐藏：" + document[hidden]);
}, false);