close事件 vue_vue 监听浏览器关闭事件

用vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来监听这个账号有没有下线。

网上找了很多种方法,一直没有实现。

主要困惑点:

1、浏览器关闭是事件,是什么

onbeforeunload、onunload  又是各种百度,

window.addEventListener( ‘beforeunload’,e =>(

执行…

) )

mounted () {

window.addEventListener('beforeunload', e => {

window.localStorage.removeItem('titleName')

});

},

mounted () {

window.addEventListener( 'beforeunload', e => this.set() );

},

methods:{

set(){

console.log('我是要调用的函数')

}

}

把请求接口放到 set中,关闭浏览器的时候是可以请求接口了,但是,刷新时候也请求,不符合要求。。。。然后又是各种百度

2、怎么区分浏览器刷新与关闭(网上找的方法,不知道出处是哪里,)

var _beforeUnload_time = 0,_gap_time=0;

window.οnunlοad=function(){

_gap_time=new Date().getTime()-_beforeUnload_time;

if(_gap_time<=5){

//浏览器关闭

$.ajax({

url:'/movecheck/logout',

// dataType:"JSON",

cache:false,

type:'post',

async:false,

success:function(dt){

//  console.log(dt)

},

error:function(dt){

}

})

}

}

window.οnbefοreunlοad=function(){

_beforeUnload_time=new Date().getTime();

}

});

确实,这个方法是可以区分浏览器是刷新还是 关闭,所以我就把上面的方法里面的ajax方法改成 axios,结果不如意,根本不会执行axios接口,ajax中有个配置async:false,发现axios中没有,又各种百度,没有找到解决方法。

突然灵机一动,第一个是 能执行接口,但是区分不了刷新与关闭,第二个能区分刷新与关闭,执行不了接口,那为何不把这两个结合起来,哈哈哈哈。。。。。恩,问题解决了(机智如我)

addEventListener,好好看看这个事件,不说了

posted @   天午正阳  阅读(3692)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示