vue 监听浏览器关闭事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 监听浏览器关闭事件相关的知识,希望对你有一定的参考价值。

参考技术A 用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();



);

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

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

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

以上是关于vue 监听浏览器关闭事件的主要内容,如果未能解决你的问题,请参考以下文章

如何在Angular项目里监听页面关闭、跳转事件?

ios 浏览器监听事件

记录:uni-app 监听浏览器返回事件,onBackPress生命周期失效问题

在vue中使用resize事件监听浏览器窗口的变化

监听浏览器关闭事件的解决方案

JS监听关闭浏览器事件