Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求


Posted in Javascript onSeptember 01, 2020

网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试,

终于解决了这个问题,代码如下:

mounted() {
   window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
   window.addEventListener('unload', e => this.unloadHandler(e))
  },
  destroyed() {
   window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
   window.removeEventListener('unload', e => this.unloadHandler(e))
  },
  methods: {
   beforeunloadHandler(){
    this._beforeUnload_time=new Date().getTime();
   },
   unloadHandler(e){
    this._gap_time=new Date().getTime()-this._beforeUnload_time;
    debugger
    //判断是窗口关闭还是刷新
    if(this._gap_time<=5){
     //如果是登录状态,关闭窗口前,移除用户
     if(!this.showLoginButton){
      $.ajax({
       url: '/pictureweb/user/remove',
       type: 'get',
       async:false, //或false,是否异步
       
      })
     }
    }
   },
}

window.beforeunload事件在window.unload事件之前执行。同时注意ajax请求方式必须为同步请求,所以不能使用axios,因为axios不能执行同步请求。

补充知识:vue如何在用户要关闭当前网页时弹出提示

效果如下图

Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求

正常 js 页面处理方式

window.onbeforeunload = function (e) {
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
  e.returnValue = '关闭提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '关闭提示';
};

vue 中处理方式

let _this = this
  window.onbeforeunload = function (e) {
   if (_this.$route.name == "dyyPerformanceCenterSale") {
    e = e || window.event;
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
     e.returnValue = '关闭提示1111';
    }
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return '关闭提示222';
   } else {
    window.onbeforeunload = null
   }
  };

针对很多同学说的没有实现 ,我这里在详细描述一下 方法写在 mounted里面 ,然后 记得把route name替换成自己当前页面。

以上这篇Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 的Document属性和方法集合
Jan 25 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 #Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 #Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 #Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 #Javascript
jQuery实现动态加载瀑布流
Sep 01 #jQuery
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 #Javascript
vue treeselect获取当前选中项的label实例
Aug 31 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
js null undefined 空区别说明
2010/06/13 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
Python字符转换
2008/09/06 Python
netbeans7安装python插件的方法图解
2013/12/24 Python
python关闭windows进程的方法
2015/04/18 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python实现的快速排序算法详解
2017/08/01 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang