Vue中监听浏览器窗口关闭事件，并在窗口关闭进行操作

2024-03-23 07:20| 来源: 网络整理| 查看: 265

window.onload事件设置页面加载时执行的动作，即进入页面的时候执行的动作。

window.onunload 已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用，一般用于设置当离开页面以后执行的动作。

window.onbeforeunload 是正要去服务器读取新的页面时调用，此时还没开始读取，简单来说就是在离开页面前的，一般用做提醒问你是不是要离开这个页面。

onunload和onbeforeunload都是在页面刷新和关闭前的动作，但是onbeforeunload是先于onunload的，并且 onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到

页面加载：onload 页面关闭：onbeforeunload →onunload 页面刷新：onbeforeunload →onunload→onload

在 MDN Web Docs 是这样介绍 window.onunload的：在这里插入图片描述

最终代码整合，可以自己放开 debugger 进行断点测试：

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 (e) { // debugger this._beforeUnload_time = new Date().getTime() console.log('this._beforeUnload_time：', this._beforeUnload_time) e = e || window.event if (e) { e.returnValue = '关闭提示' } // debugger return '关闭提示' }, unloadHandler () { console.log('this._beforeUnload_time2：', this._beforeUnload_time) this._gap_time = new Date().getTime() - this._beforeUnload_time console.log('this._gap_time：', this._gap_time) // 判断是窗口关闭还是刷新 if (this._gap_time $.ajax({ url: '/pictureweb/user/remove', type: 'get', async: false // 或false,是否异步 }) } } else { // debugger } } } 2021.9.3 更新

判断网页页面是否关闭或刷新的方法：主要是针对网页版的页面，判断触发onbeforeunload事件的时候： 1. 鼠标是否点击了关闭按钮； 2. 是否按了ALT+F4；这两种方式来关闭网页，如果是，则认为系统是关闭网页，否则在认为系统是刷新网页。

window.onbeforeunload = function (event) { alert ("===οnbefοreunlοad==="); if (event.clientX > document.body.clientWidth && event.clientY alert ("你正在刷新页面"); } }

【本文地址】

公司简介

联系我们