zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue监听浏览器关闭

Vue浏览器 关闭 监听
2023-09-11 14:17:22 时间

https://www.jianshu.com/p/ed6010ab868e

用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.onunload=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.onbeforeunload=function(){

  _beforeUnload_time=new Date().getTime();

}

});