用户直接关闭浏览器如何自动退出

一般搜索结果都是一个监听事件, 即 onunload 或 onbeforeunload 事件, 但有一个致命性的缺陷, 那就是当用户刷新的时候这些事件同样也会触发. 这时候如何区分成为了难题.

这里给出一个区分的思路:

首先在浏览器内监听两个事件, 一个是载入事件 load, 另一个是销毁前的事件 onbeforeunload, 用户刷新后, 一定是先触发销毁事件然后是载入事件. 就是利用了这个顺序完成的监听过程.

触发销毁事件, 事件内部发送给后台一个请求,携带参数 eventName=load , 后台接收后先不要直接退出, 而是生成一个十秒左右的定时器, 定时器在十秒后自动注销当前账户. 用户刷新并触发载入事件时, 事件内部同样发送后台一个请求,携带参数 eventName=unload 后台接收后取消定时器.

如果是关闭浏览器, 则只触发上一步, 十秒后依然会自动退出. 这样就达到区分的目的了.

示例代码:

// 前端载入页面事件
window.onload = function () {let httpRequest = new XMLHttpRequest()   // 第一步：建立所需的对象httpRequest.open('POST', '/user/logout') // 第二步：打开连接httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')httpRequest.send('eventName=load')         // 第三步：携带参数httpRequest.onreadystatechange = function () {}
}
// 前端销毁页面事件
window.onbeforeunload = function () {let httpRequest = new XMLHttpRequest()   // 第一步：建立所需的对象httpRequest.open('POST', '/user/logout') // 第二步：打开连接httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')httpRequest.send('eventName=unload')   // 第三步：携带参数httpRequest.onreadystatechange = function () {}
}

// 后端 java 处理事件
// 使用 SaToken 进行演示
@PostMapping("/user/logout")
public void logout(String eventName) {if (!StpUtil.isLogin()) {System.out.println("未登录状态下什么都不做");return;}System.out.println("执行退出: " + eventName);if (eventName == null) {System.out.println("用户正常点击按钮退出");StpUtil.logout();} else {SaSession session = StpUtil.getSession();String timerKey = "userCloseEventTimer";if ("unload".equals(eventName)) {System.out.println("10秒后退出");Integer loginId = StpUtil.getLoginIdAsInt();// 开启定时TimerTask timerTask = new TimerTask() {@Overridepublic void run() {System.out.println("自动退出");StpUtil.logout(loginId);}};Timer timer = new Timer();timer.schedule(timerTask, 10_000); // 控制时长session.set(timerKey, timer);} else if ("load".equals(eventName)){// 关闭定时if (session.has(timerKey)) {System.out.println("取消退出");Timer timer = session.getModel(timerKey, Timer.class);timer.cancel();session.delete(timerKey);}}}
}

十秒只是一个范围, 可以动态修改.

参考文献: load事件 beforeunload事件

用户直接关闭浏览器如何自动退出相关推荐

用户直接关闭浏览器，直接退出登陆的实现方法【php+thinkphp】
问题背景:为了用户安全,想让用户关闭浏览器后,直接退出. 一直想着用JavaScript的方式解决这个问题,然后发现并不是那么容易解决的,中间出现各种问题,弄起来也很复杂.后面发现是自己对Cookie ...
php cookie突然没,PHP利用Cookie设置用户30分钟未操作自动退出功能
登陆控制器需要做的登陆成功把用户ID等信息存入cookie: $this->systemSetKey(array('name'=>$admin_info['admin_name'], 'i ...
php登录后自动退出登录,PHP利用Cookie设置用户30分钟未操作自动退出功能
登陆控制器需要做的登陆成功把用户ID等信息存入cookie: $this->systemSetKey(array('name'=>$admin_info['admin_name'], 'i ...
如何判断用户是否关闭浏览器
主要应用场景,比如web聊天室等.解决问题,用户退出聊天,服务器该用户的进程还存在.如果太多进程会造成服务器僵尸进程太多导致服务器运行缓慢,宕机.
CMD命令行Chrome自动网页截图到文件，截图完后自动退出浏览器
Taking screenshots 截图 To capture a screenshot of a page, use the --screenshotflag: 要对页面截图,只需使用--scre ...
关闭页面时执行“退出”的解决方案
在有些应用中我们需要实时的更新站点用户是否在线的状态.比如一些论坛里的在线成员实时显示,或基于网页的聊天.会议系统等.这种情况下,如果用户点击"退出"按钮或链接,我们将之行一系列后 ...
关闭浏览器清除cookie
根据客户要求使用dedecms v5.6版本,发现了一个会员登录的bug!看来dedecms也不过如此! 首先说说bug所在:在会员登录页面 /member/index.php 登录的时候有效期如果 ...
javascript兼容性：IE6/7关闭浏览器操作
通过javascript关闭浏览器的时候,"一般"会弹出系统的默认提示框,提示用户是否关闭浏览器,这可以通过javascript解决,但是IE6,IE7解决的办法是不一样的. 代码 ...
关闭浏览器窗口的时候，如何清空localStorage的数据
关闭浏览器窗口的时候,如何清空localStorage的数据一.对于单页面应用,例如vue等二.对于多页面应用 1.第一种方案(对于vue) 2.第二种方案(对于原生js) 一.对于单页面应用,例 ...

用户直接关闭浏览器如何自动退出

用户直接关闭浏览器如何自动退出相关推荐

最新文章

热门文章