监听浏览器关闭事件

Posted 2023-04-30

参考技术A # 1: 监听浏览器关闭事件  ---  后台删用户登录信息    ---   IE不可用

.jsp :

.java :

window.onbeforeunload=function()

   alert( "您确定退出吗？");



window.onbeforeunload=function()

   return "您确定退出吗？";



页面加载时只执行onload

页面关闭时只执行onunload

页面刷新时先执行onbeforeunload，然后onunload，最后onload。

前辈的结论是：

//对于ie，谷歌，360：

--  页面加载时只执行onload

--  页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。

-- 页面关闭时，先onbeforeunload事件，再onunload事件。

//对于火狐：

-- 页面刷新时，只执行onunload;

-- 页面关闭时，只执行onbeforeunload事件

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，好好看看这个事件，不说了