export default {
data(){
return{
_beforeUnload_time:0,
_gap_time:0,
}
},
mounted() {
//组件挂载时监听窗体关闭监听事件
window.addEventListener("beforeunload", e => {
this.beforeunloadHandler(e);
});
window.addEventListener('unload', e => this.unloadHandler(e))
},
destroyed() {
//组件销毁时清除窗体监听事件
window.removeEventListener("beforeunload", e => {
this.beforeunloadHandler(e);
});
window.removeEventListener('unload', e => this.unloadHandler(e))
},
methods:{
//判断是窗口关闭还是刷新
unloadHandler(e){
this._gap_time=new Date().getTime()-this._beforeUnload_time;
if(this._gap_time<=5){
//关闭要做的事情(这里可以发送请求,window.beforeunload事件在window.unload事件之前执行。同时注意ajax请求方式必须为同步请求,所以不能使用axios,因为axios不能执行同步请求,推荐使用navigator.sendBeacon。原因参考文章里有介绍)
// 获取当前域名
let protocolStr = window.location.protocol;
let k_host = window.location.host;
let path = protocolStr + "//" + k_host;
//判断运行环境,设置跨域代理前缀
if(process.env.NODE_ENV === 'development') {
path = '/api';
}
//发送需要的请求
const res= navigator.sendBeacon(path+'/xxxxx/abc.jhtml', '') //sendBeacon 接收两个参数 navigator.sendBeacon(url, data); url 请求路径 data 请求参数 发送方式为POST,需要后端支持
//由于关闭窗体无法控制台调试,借助本地存储查看发送结果,true发送成功,false发送失败
if(exportEndRes){
window.localStorage.setItem("isRquire",JSON.stringify(exportEndRes))
}
}else{
//刷新要做的事情...
}
}
/**
* [beforeunloadHandler 浏览器关闭时进行用户提示]
* @return {[type]} [description]
*/
beforeunloadHandler(e) {
this._beforeUnload_time=new Date().getTime();
}
}
}
}
参考文献:
网友评论