vue项目使用js监听浏览器关闭、刷新、后退事件实现方法
作者：乐辞
业务场景
在Web应用开发中，我们经常会遇到这样的需求：在用户执行关键操作，如提交表单、支付交易等过程中，突然关闭、刷新或者后退浏览器，可能会导致操作未完成或者数据丢失。为了提高用户体验和保证应用数据的完整性，我们需要合理地使用JavaScript来监听浏览器关闭、刷新、后退事件，并作出相应处理。
实现方案
监听beforeunload事件
beforeunload事件是在页面即将卸载时触发的，这通常发生在用户关闭或刷新页面之前。我们可以利用这个事件来提示用户确认是否真的需要离开当前页面。
window.addEventListener('beforeunload', function (e) {
// 兼容不同浏览器的提示方式
var confirmationMessage = '您确定要离开吗？';
e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
return confirmationMessage; // Gecko, WebKit, Chrome <34
});
监听unload事件
当文档被完全卸载后，unload事件会被触发。该事件可以用来执行一些清理操作，比如清除cookies，记录日志等。
window.addEventListener('unload', function(event) {
// 执行一些清理操作
});
监听浏览器后退按钮事件
浏览器后退按钮触发的是popstate事件，它通常与HTML5的历史API结合使用。在Vue项目中，如果你使用vue-router管理路由，可以如下监听路由变化来处理后退按钮的行为：
router.beforeEach((to, from, next) => {
// 可以在这里处理后退逻辑
// to 和 from 是路由对象
next(); // 确保要调用next()方法，否则钩子就不会被resolved
});
另外，你也可以直接监听popstate事件来处理后退操作：
methods:{
onPopState(e) {
// 监听到浏览器回退事件（这里提示用的confirm，是可以自定义的）
if (confirm('离开当前页面数据可能会丢失，您确定离开当前页面吗？')) {
// 点击确定回退
window.removeEventListener('popstate', this.onPopState)
window.history.go(-1)
} else {
// 点击取消不回退
window.history.pushState(null, null, window.location.href)
}
},
}，
mounted() {
// 添加 popstate 事件监听
window.history.pushState(null, null, window.location.href);
window.addEventListener('popstate', this.onPopState);
},
beforeDestroy() {
// 在组件销毁前，移除 popstate 事件监听
window.removeEventListener('popstate', this.onPopState)
}
区分浏览器刷新与关闭
对于浏览器刷新事件的监听，虽然它会触发beforeunload事件，但有时我们需要区分页面是被刷新还是被关闭。这可以通过一些技巧来实现，例如使用sessionStorage。
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
console.info("这是一个刷新页面的操作");
} else {
console.info("这是一个新访问页面的操作");
}
请注意，performance.navigation特性已不推荐使用，因为它已被废弃并不被所有浏览器支持。取而代之的是Navigation Timing API，尽管如此，这个API也不能直接检测刷新事件。
在使用上述事件时，我们应当小心谨慎，避免阻碍用户的正常操作。特别是beforeunload事件，如果不是非常必要，最好不要使用，因为它可能会影响用户体验。我们应该只在用户可能会丢失重要数据的情况下使用警告提示。
附：vue如何区别浏览器刷新和关闭
知识点
浏览器关闭执行的是 beforeunload ， unload 这两个事件；
而浏览器刷新执行的是beforeunload， unload， load 三个事件；
思路
虽然刷新与关闭都会走onbeforeunload与onunload，但可能因为刷新在加载新页面前内部机制还需要做一些准备工作，所以刷新事件在执行到onunload事件时，用的时间会比关闭事件时间长。
所以，通过时间差来判断浏览器是刷新还是关闭，浏览器执行beforeunload的时候给一个开始时间，执行unload的时候给一个结束时间；判断一下时间差；我设置的是5毫秒来区分浏览器的关闭和刷新，具体的时间最好还是亲自测一下；
代码
mounted() {
let beginTime = 0; //开始时间
let differTime = 0; //时间差
window.onunload = function () {
differTime = new Date().getTime() - beginTime;
if (differTime <= 5) {
console.log("这是关闭");
} else {
console.log("这是刷新");
}
};
window.onbeforeunload = function () {
beginTime = new Date().getTime();
};
},
};
本人亲测有效
总结
到此这篇关于vue项目使用js监听浏览器关闭、刷新、后退事件实现方法的文章就介绍到这了,更多相关vue js监听浏览器关闭、刷新、后退事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！