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事件,如果不是非常必要,最好不要使用,因为它可能会影响用户体验。我们应该只在用户可能会丢失重要数据的情况下使用警告提示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

格雷希尔帮助仪器仪表测试时快速密封的G60C系列接头其优势有哪些

仪器仪表在工业领域中扮演着重要的角色&#xff0c;如&#xff1a;压力表&#xff0c;压力传感器、压力变送器、压力开关、压力歧管等这些&#xff0c;在工业领域中都是随处可见的&#xff0c;其数据的精度直接影响着产品在生产过程中的质量和安全性&#xff1b;因此&#xff0…

day4 检测链表的环入口

ListNode *detectCycle(ListNode *head) { ListNode* fast head; ListNode* slow head; while(fast ! NULL && fast->next ! NULL) { slow slow->next; fast fast->next->next; // 快慢指针相遇&#xff0c;此…

8-Hive原理与技术

单选题 题目1&#xff1a;按粒度大小的顺序&#xff0c;Hive数据被分为&#xff1a;数据库、数据表、桶和什么 选项: A 元祖 B 栏 C 分区 D 行 答案&#xff1a;C ------------------------------ 题目2&#xff1a;以下选项中&#xff0c;哪种类型间的转换是被Hive查询语言…

fastadmin嵌套关联查询,thinkPHP5嵌套关联查询

fastadmin嵌套关联查询 thinkPHP5嵌套关联查询 笔记记录 嵌套关联查询 A -> B -> C A 表关联B表 B表关联C表 同时把A&#xff0f;B&#xff0f;C表相关的数据展现出来 B表的model B表关联C表 我的C表是B表的自身关联。也是一个表&#xff0c;所以为C表 namespace app…

食品行业研究:金枪鱼产业发展及市场消费分析

金枪鱼是无污染、高档、美味、安全、健康的绿色海洋动物食品&#xff0c;是国际营养协会推荐的世界三大营养鱼种之一 ,它凭借较高的经济价值、较广的分布范围、丰富的资源储量等优势&#xff0c;成为当今世界远洋渔业发展的关注重点和国际水产品贸易的主要鱼种。 金枪鱼类是高度…

【重点】41.缺失的第一个正数

题目 法1&#xff1a;哈希表 实际上&#xff0c;对于一个长度为N的数组&#xff0c;其中没有出现的最小正整数只能在 [1, N 1]中。这是因为如果[1, N] 都出现了&#xff0c;那么答案是 N 1&#xff0c;否则答案是[1, N] 中没有出现的最小正整数。 class Solution {public …

3分钟,全方面了解透明oled拼接屏

透明OLED拼接屏是一种先进的显示技术&#xff0c;它具有透明度高、色彩鲜艳、轻薄柔韧、拼接灵活、功耗低、寿命长等特点。在商业、教育、展示、娱乐等领域&#xff0c;透明OLED拼接屏的应用越来越广泛。 在商业领域&#xff0c;透明OLED拼接屏可以作为商品展示柜&#xff0c;通…

【android开发-07】android中ImageView的用法介绍

1&#xff0c;ImageView使用drawable图片的方法 ImageView是Android开发中常用的视图控件&#xff0c;用于显示图片资源。ImageView继承自View类&#xff0c;可以用于展示Bitmap或Drawable类型的图片资源。 ImageView可以通过XML属性设置显示图片&#xff0c;也可以通过Java代…

关于webpack 的面试知识点

一、什么是loader?有哪些常见的loader?怎么配置&#xff1f; loader 可以理解成翻译官&#xff0c;webpack,只能识别js&#xff0c;其它的文件&#xff0c;就需要loader 来解析 常见的loader有&#xff1a; babel-loader(处理es6)、css-loader、style-loader&#xff08;将cs…

系统运维工具KSysAK——让运维回归简单

系统运维工具KSysAK——让运维回归简单 1.基本信息 1.1概述 系统异常定位分析工具KSysAK是云峦操作系统研发及运维人员总结开发及运维经验&#xff0c;设计和研发的多个运维工具的集合&#xff0c;可以覆盖系统的日常监控、线上问题诊断和系统故障修复等常见运维场景。 工具…

从一个bug认识 Spring 单例模式

大家好&#xff0c;我是风筝&#xff0c;公众号「古时的风筝」 谁还没在 Spring 里栽过跟头呢&#xff0c;从哪儿跌倒&#xff0c;就从哪儿睡一会儿&#xff0c;然后再爬起来。 讲点儿武德 这是由一个真实的 bug 引起的&#xff0c;bug 产生的原因就是忽略了 Spring Bean 的…

网络层之无分类编址CIDR(内涵计算例题)

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

初学vue3与ts:element-plus的警告(Extraneous non-props attributes (ref_key) ...)

用了vue3与ts&#xff0c;ui我就选了element-plus element-plus官网&#xff1a;https://element-plus.org/zh-CN/ element-plus官网(国内镜像站点)&#xff1a;https://element-plus.gitee.io/zh-CN/ 国内镜像站点如果进不去的话&#xff0c;在element-plus官网最下面的链接-&…

Jupyter Notebook中设置Cell主题

1. 获取本机Jupyter的配置目录 C:\Users\Administrator>jupyter --data-dir C:\Users\Administrator\AppData\Roaming\jupyter2. 进入获取的目录&#xff0c;创建指定路径 C:\Users\Administrator>cd C:\Users\Administrator\AppData\Roaming\jupyter C:\Users\Adminis…

【华为OD】某通信网络中有N个网络节点,用1到N进行标识。 网络通过一个有向无环图表示,其中图的边的值表示结点之间的消息传递时延。

某通信网络中有N个网络节点,用1到N进行标识。网络通过一个有向无环图表示,其中图的边的值表示结点之间的消息传递时延。现给定相连节点之间的时延列表times[i] = {u,v,w},u表示源节点,v表示目的节点,w表示u和v之间的消息传递时延。请计算给定源节点到目的节点的最小传输时…

vue3 Composition API

Vue3 Composition API 是 Vue.js 的新版本中引入的一种新特性&#xff0c;它允许开发者更灵活地组织和重用代码。Composition API 提供了一种新的方式来组织组件逻辑&#xff0c;使得代码更加模块化和可维护。 以下是示例&#xff1a; <template><div>{{ count }…

TikTok新闻视角:短视频如何改变信息传递方式?

随着数字时代的不断发展&#xff0c;信息传递的方式也在不断演变。近年来&#xff0c;短视频平台TikTok崭露头角&#xff0c;通过其独特的15秒短视频形式&#xff0c;逐渐在新闻传播领域占据一席之地。本文将深入探讨TikTok在新闻视角下是如何改变信息传递方式的&#xff0c;以…

计算机毕设:基于机器学习的生物医学语音检测识别 附完整代码数据可直接运行

项目视频讲解: 基于机器学习的生物医学语音检测识别 完整代码数据可直接运行_哔哩哔哩_bilibili 运行效果图: 数据展示: 完整代码: #导入python的 numpy matplotlib pandas库 import pandas as pd import numpy as np import matplotlib.pyplot as plt #绘图 import se…

jupyter notebook中添加内核kernel

step1 检查环境中是否有kernel python -m ipykernel --versionstep2 若没有kernel&#xff0c;则需要安装 kernel conda install ipykernel -i https://pypi.tuna.tsinghua.edu.cn/simplestep3 查看已添加的内核 jupyter kernelspec liststep4 添加内核 python -m ipykerne…

学习php中使用composer下载安装firebase/php-jwt 以及调用方法

学习php中使用composer下载安装firebase/php-jwt 以及调用方法 1、安装firebase/php-jwt2、封装jwt类 1、安装firebase/php-jwt composer require firebase/php-jwt安装好以后出现以下文件: 2、封装jwt类 根据所使用的php框架&#xff0c;在指定目录创建 Token.php <?ph…