vue 页面刷新/关闭监听

1,422 阅读1分钟

vue 页面刷新/关闭监听

<script>
        /**
         * 根据执行不同的操作(刷新or关闭)所需要的时间来判断是执行了哪个操作。
         * 浏览器关闭执行的是 beforeunload , unload 这两个事件;
         * 而浏览器刷新执行的是beforeunload, unload, load 三个事件;
         * 在mounted生命周期中挂载beforeunload,和unload事件,通过执行间隔时间判断是刷新页面还是卸载(关闭)页面,如果是关闭浏览器,两个事件执行间隔事件会少于5ms,刷新页面时间会长,不同页面经测试所需时间8~100ms之间不等。注意销毁事件 避免影响其他页面 (destroyed生命周期)
         * 经过我的实践发现性能好的浏览器刷新页面时间间隔可能是4毫秒,所以保险起见 gap_time < 4
         * 如果有提示确认框,则无法根据时间来验证了
         * */
        var beforeUnload_time = 0
        window.onbeforeunload = function (e) {
            e = e || window.event;
            // 兼容IE8和Firefox 4之前的版本
            localStorage.setItem('e', JSON.stringify(e))
            if (e) {
                e.returnValue = '关闭提示111';
            }

            localStorage.setItem('event', JSON.stringify(event))

            // 默认刷新页面
            localStorage.setItem('pageStatus', '1')
            // 记录时间
            beforeUnload_time = new Date().getTime();

            // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
            return '关闭提示111';
        };
        window.onunload = function (e) {
            var gap_time = new Date().getTime() - beforeUnload_time;
            localStorage.setItem('gap_time', gap_time)
            //判断是窗口关闭还是刷新
            if (gap_time < 4) {
                //如果是登录状态,关闭窗口前,移除用户 ,必须发送同步请求
                localStorage.setItem('pageStatus', '0')
                console.log("你关闭了浏览器");
            }
        }
    </script>