用vue做的項(xiàng)目，有個(gè)需求就是關(guān)閉瀏覽器的時(shí)候，需要往后臺(tái)提交有個(gè)接口，來監(jiān)聽這個(gè)賬號有沒有下線。
網(wǎng)上找了很多種方法，一直沒有實(shí)現(xiàn)。
主要困惑點(diǎn)：
1、瀏覽器關(guān)閉是事件，是什么
onbeforeunload、onunload? 又是各種百度，
window.addEventListener( ‘beforeunload’,e =>(
執(zhí)行…
) )
mounted () {
? ? window.addEventListener('beforeunload', e => {
? ? ? window.localStorage.removeItem('titleName')
? ? });
? },
mounted () {
? ? window.addEventListener( 'beforeunload', e => this.set() );
? },
? methods:{
set(){
console.log('我是要調(diào)用的函數(shù)')
}
? }
把請求接口放到 set中，關(guān)閉瀏覽器的時(shí)候是可以請求接口了，但是，刷新時(shí)候也請求，不符合要求。。。。然后又是各種百度
2、怎么區(qū)分瀏覽器刷新與關(guān)閉（網(wǎng)上找的方法，不知道出處是哪里，）
var _beforeUnload_time = 0,_gap_time=0;
window.onunload=function(){
? _gap_time=new Date().getTime()-_beforeUnload_time;
? if(_gap_time<=5){
? //瀏覽器關(guān)閉
????$.ajax({
? ? ? ? ? ? ? ? ? url:'/movecheck/logout',
? ? ? ? ? ? ? ? ? // dataType:"JSON",
? ? ? ? ? ? ? ? ? cache:false,
? ? ? ? ? ? ? ? ? type:'post',
? ? ? ? ? ? ? ? ? async:false,
? ? ? ? ? ? ? ? ? success:function(dt){
? ? ? ? ? ? ? ? ? //? console.log(dt)
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? error:function(dt){
? ? ? ? ? ? ? ? ? }
? ? ? ? ? })
? }
}
window.onbeforeunload=function(){
? _beforeUnload_time=new Date().getTime();
}
});
確實(shí)，這個(gè)方法是可以區(qū)分瀏覽器是刷新還是 關(guān)閉，所以我就把上面的方法里面的ajax方法改成 axios，結(jié)果不如意，根本不會(huì)執(zhí)行axios接口，ajax中有個(gè)配置async:false,發(fā)現(xiàn)axios中沒有，又各種百度，沒有找到解決方法。
突然靈機(jī)一動(dòng)，第一個(gè)是 能執(zhí)行接口，但是區(qū)分不了刷新與關(guān)閉，第二個(gè)能區(qū)分刷新與關(guān)閉，執(zhí)行不了接口，那為何不把這兩個(gè)結(jié)合起來，哈哈哈哈。。。。。恩，問題解決了（機(jī)智如我）
addEventListener，好好看看這個(gè)事件，不說了
