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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,112评论 1 45
  • # 1: 监听浏览器关闭事件 --- 后台删用户登录信息 --- IE不可用 .jsp : var _befo...
    __凌阅读 4,091评论 0 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,197评论 0 2
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 3、HTTP的几种请求方法用途 4、从浏览器地...
    peng凯阅读 811评论 0 1
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,713评论 0 7

友情链接更多精彩内容