JS、Vue.js监听用户是否离开当前页

JS、Vue.js监听用户是否离开当前页面

• 使用visibilitychange监听document
  当触发visibilitychange后，document.visibilityState会有两个值，第一个是hidden：表示当前页面不可见，第二个是visible：表示当前页面至少有一部分是可见的。通过if判定document.visibilityState的值来实现当用户离开页面时要实现的交互或者向后台发送数据。

mounted() {//如果再vue中将判定放置在mountde
        
        document.addEventListener('visibilitychange',function(e){
            console.log(document.visibilityState);
            let state = document.visibilityState
            if(state == 'hidden'){
                console.log(document.visibilityState,'用户离开了');
            }
            if(state == 'visible'){
                console.log(document.visibilityState,'回来了');
            }
        });
}

• 给window添加onblur和onfocus
  visibilitychange监听用户是否离开当前页面存在一定的漏洞，当用户将另一个软件或者页面的窗口缩小，通过Alt-Tab切换时，因切换出的窗口小于用户所在页面的窗口，用户所在页面还有部分内容可以被用户看到，那么页面就会认为用户没有离开，但实际上用户已经离开了，所以需要再给window添加onblur和onfocus，onblur为当前页面失去焦点，onfocus为当前页面得到焦点，通过焦点来判断用户是否离开当前页面，当通过Alt-Tab切换时，焦点会自动转移到新窗口上，之前的页面就失去焦点，从而判定用户离开。

window.onblur = function () {
   console.log('失去焦点');
}
window.onfocus = function() {
    console.log('得到焦点');
}

实际开发中最好将两种判定全部加上。