vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求
- 1.需求背景:
- 2.需求分析:
- 3.实现方式:
- 4.实现方式解析:
- 5.存在的问题/风险点:
- 1)为了避免意外弹出窗口,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,直接执行关闭/刷新操作是不会弹出提示框的;
- 2)浏览器提示框的样式和内容是默认的,不能更改;
- 3)在关闭/刷新页面前发送的请求,如果使用axios方式,由于是异步的,在执行刷新/关闭操作时,存在请求还未发送到服务端就被浏览器cancle掉。Fetch API提供了一套健壮的与服务器端交互的方式,提供了跨越不同平台 API 的一致接口。它提供了一个keepalive属性,保证不管发送请求的页面关闭与否,请求都会持续直到结束。不过上传数据的限制是64 KB。
- 4)在执行刷新页面操作时,触发请求,在控制台中会发现该请求一直在pending状态中,但其实服务器端已经接收到该请求,亲测有效!
1.需求背景:
用户离开页面前,修改数据未进行保存操作,提示框提醒用户,并发送接口请求告知后端清空已修改数据。
2.需求分析:
可以再在beforeDestory钩子函数中,调用接口操作,但该方法只能实现路由切换,当前组件销毁时会触发,不能解决浏览器页面关闭和页面刷新触发该请求,所以还是要借助window.onbeforeunload事件。
3.实现方式:
mounted() {
window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
window.addEventListener('unload', this.updateHandler);
}
beforeunloadHandler(e) {
e = e || window.event;
if (e) {
e.returnValue = '关闭提示';
}
return '关闭提示';
}
updateHandler() {
fetch('url', {
method: 'POST',
body:'参数'
headers: {'Content-Type': 'application/json'},
keepalive: true
});
}
4.实现方式解析:
1)浏览器页面事件基础
页面加载时只执行 onload 事件。
页面关闭时,先 onbeforeunload 事件,再 onunload 事件。
页面刷新时先执行 onbeforeunload事件,然后 onunload 事件,最后 onload 事件。
2)在mounted监听beforeunload和unload事件
当执行页面刷新关闭操作时,会触发onbeforeunload事件,在该事件绑定的方法中,return一个值(为true的值)浏览器会弹出一个提示框,否则不会弹出,提示框如下图所示
当点击取消按钮时,会阻断,不会执行任何操作,当点击重新加载/离开按钮时会触发unload事件,在该事件中调用请求方法即可。