当前位置: 首页 > news >正文

vue实现浏览器关闭或刷新弹窗提示(beforeunload/unload)

vue实现浏览器关闭或刷新弹窗提示

  • 一、推荐代码
  • 二、错误情况说明
    • 1.在beforeunload事件里面加alert
    • 2.在一个没有焦点的 iframe 或 frame 浏览器会阻止 beforeunload 弹窗
    • 3.无法触发destroyed/beforedestroyed/deactivated
    • 4.能触发beforeRouteEnter,但不能触发beforeRouteUpdate、beforeRouteLeave


vue实现浏览器关闭或刷新弹窗提示
也可以在时候强制保存记录或执行其他操作。

一、推荐代码

export default {data () {return {}},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) {e.returnValue = '确定离开页面吗?';return " ";},unloadHandler(e) {e.returnValue = '确定离开页面吗?';return " ";}}
}

代码说明:
有些浏览器会限制在 beforeunload 事件中触发 alert,confirm 或 prompt 等弹出式的用户交互。这是为了防止滥用这些弹窗干扰用户的操作。
虽然在 beforeunload 事件中弹出这些窗口通常被浏览器禁止,但你仍然可以在这个事件中修改 event.returnValue 的值来显示一个提示给用户。但这种方式无法自定义内容,只能显示浏览器默认的文本。

beforeunload 事件在即将离开当前页面(刷新或关闭)时触发。
unload 事件在即将离开当前页面(刷新或关闭)时触发。

二、错误情况说明

1.在beforeunload事件里面加alert

代码:

window.onbeforeonload = function(){
window.alert("A");
}

报错:
Blocked alert() during beforeunload.

2.在一个没有焦点的 iframe 或 frame 浏览器会阻止 beforeunload 弹窗

报错:
Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had...
说明:
用户有操作了点击界面后再刷新/关闭窗口才会触发。

3.无法触发destroyed/beforedestroyed/deactivated

原因:keepAlive设置为true时,
不会触发beforedestroyed,destroyed等方法
而且,deactivated 钩子在使用 keep-alive 组件缓存时触发,而页面刷新会清除所有的缓存,所以在这种情况下,deactivated 钩子也不会执行。

4.能触发beforeRouteEnter,但不能触发beforeRouteUpdate、beforeRouteLeave

原因:

  • beforeRouteEnter:在进入该路由前被调用,通常用于在组件渲染前获取数据等操作。
  • beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用。
  • beforeRouteLeave:在离开当前路由时被调用。

如果 beforeRouteEnter 能够触发而其他两个却无法触发,可能是因为路由的变化并不会触发组件的重新渲染,而是进行了复用。beforeRouteUpdate 和 beforeRouteLeave 都是针对组件复用时触发的。

相关文章:

vue实现浏览器关闭或刷新弹窗提示(beforeunload/unload)

vue实现浏览器关闭或刷新弹窗提示 一、推荐代码二、错误情况说明1.在beforeunload事件里面加alert2.在一个没有焦点的 iframe 或 frame 浏览器会阻止 beforeunload 弹窗3.无法触发destroyed/beforedestroyed/deactivated4.能触发beforeRouteEnter,但不能触发beforeR…...

Zookeeper学习笔记(1)—— 基础知识

Zookeeper概述 Zookeeper 是一个开源的分布式的,为分布式框架提供协调服务的 Apache 项目 工作机制 Zookeeper从设计模式角度来理解:是一个基于观察者模式设计的分布式服务管理框架,它负责存储和管理大家都关心的数据,然后接受…...

mp4视频批量截取!!!

mp4视频批量截取!!! 问题:如果我们想截取一个mp4视频中的多个片段,一个一个截会很麻烦! 可以将想要截取的开始时间和结束时间保存到 excel表 中,进行批量截取。 1、对一个视频,记…...

jQuery - AJAX get() 和 post() 方法

jQuery - AJAX get() 和 post() 方法 jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求:GET vs POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。 GET - 从指定的资源请求数据 POST - 向…...

设计模式(4)-行为型模式

行为型模式 行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。 行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间…...

JavaScript概述

一、JavaScript简介: JavaScript是互联网上流行的脚本语言,可用于HTML和web,可广泛应用于服务器、PC、笔记本、平板电脑和智能手机等设备。 JavaScript是一种轻量级的编程语言,可插入HTML页面的编程代码,插入HTML页面后…...

Solidity案例详解(四)投票智能合约

该合约为原创合约,功能要求如下 在⼀定时间能进⾏投票超过时间投票截⽌,并投赞同票超过50%则为通过。 使⽤safeMath库,使⽤Owner 第三⽅库拥有参与投票权的⽤户在创建合约时确定Voter 结构 要有时间戳、投票是否同意等;struct 结构…...

Linux系统编程——进程中vfork函数

函数原型 pid_t vfork(void);//pid_t是无符号整型 所需头文件 #include <sys/types.h> #include <unistd.h> 功能 vfork() 函数和 fork() 函数一样都是在已有的进程中创建一个新的进程&#xff0c;但它们创建的子进程是有区别的。 返回值 成功子进程中返回 …...

敏感数据是什么?包含哪些?如何保障安全?

最近看到不少小伙伴在问&#xff0c;敏感数据是什么&#xff1f;包含哪些&#xff1f;如何保障安全&#xff1f;这里我们小编就给大家一一解答一下&#xff0c;仅供参考哦&#xff01; 敏感数据是什么&#xff1f; 敏感数据&#xff0c;是指泄漏后可能会给社会或个人带来严重危…...

Leadshop开源商城小程序源码 – 支持公众号H5

Leadshop是一款出色的开源电商系统&#xff0c;具备轻量级、高性能的特点&#xff0c;并提供持续更新和迭代服务。该系统采用前后端分离架构&#xff08;uniappyii2.0&#xff09;&#xff0c;以实现最佳用户体验为目标。 前端部分采用了uni-app、ES6、Vue、Vuex、Vue Router、…...

Scala---方法与函数

一、Scala方法的定义 有参方法&无参方法 def fun (a: Int , b: Int) : Unit {println(ab) } fun(1,1)def fun1 (a: Int , b: Int) ab println(fun1(1,2)) 注意点&#xff1a; 方法定义语法 用def来定义可以定义传入的参数&#xff0c;要指定传入参数的类型方法可以写返…...

【C++】泛型编程 ④ ( 函数模板 与 普通函数 调用规则 | 类型自动转换 | 类型自动转换 + 显式指定泛型类型 )

文章目录 一、普通函数 与 函数模板 的调用规则 - 类型自动转换1、函数模板和重载函数2、类型自动转换3、代码示例 - 类型自动转换 二、普通函数 与 函数模板 的调用规则 - 类型自动转换 显式指定泛型类型1、类型自动转换 显式指定泛型类型2、代码示例 - 类型自动转换 显式指…...

基于ChatGPT的文本生成艺术框架—WordArt Designer

WordArt Designer是一个基于gpt-3.5 turbo的艺术字生成框架&#xff0c;包含四个关键模块:LLM引擎、SemTypo、Styltypo和TextTypo模块。由gpt-3.5 turbo驱动的LLM引擎可以解释用户输入&#xff0c;从而将抽象概念转化为具体的设计。 SemTypo模块使用语义概念优化字体设计&…...

服务名无效。 请键入 NET HELPMSG 2185以获得更多的帮助

遇到的问题是MySQL服务没有。 因为net start 服务名&#xff0c;启动的是win下注册的服务。此时&#xff0c;我系统中并没有注册mysql到服务中。即下面没有mysql服务。 mysqld --install net start mysql...

UE5——C++编译MSB3073报错

报错&#xff1a; C:\Program Files\Microsoft Visual Studio\2022\Professional\MSBuild\Microsoft\VC\v170\Microsoft.MakeFile.Targets(50,5): error MSB3073: 命令“D:\0_Game\EpicGame\UE_5.1\Engine\Build\BatchFiles\Rebuild.bat DigitalVisualizationEditor Win64 Deve…...

自己动手实现一个深度学习算法——六、与学习相关的技巧

文章目录 1.参数的更新1&#xff09;SGD2&#xff09;Momentum3&#xff09;AdaGrad4&#xff09;Adam5&#xff09;最优化方法的比较6&#xff09;基于MNIST数据集的更新方法的比较 2.权重的初始值1&#xff09;权重初始值不能为02&#xff09;隐藏层的激活值的分布3&#xff…...

Maven间接依赖

目录 背景 依赖标签 依赖的作用域 Maven仲裁机制 场景示例 多个pom树合并打包...

Java架构师分布式搜索数据准确性解决方案

目录 1 Elasticsearch内置分词器1.1 Standard(标准分词器)1.2 Simple(简单分词器)1.3 Whitespace(空格分词器)1.4 Stop(停止分词器)1.5 Keyword(关键字分词器)1.6 Pattern(模板分词器)1.7 Language(语言分词器)1.8 Fingerprint(指纹分词器)2 Es 模糊查询 match…...

Clickhouse学习笔记

学习内容参考&#xff1a;一套上手ClickHouse-OLAP分析引擎&#xff0c;囊括Prometheus与Grafana_哔哩哔哩_bilibili 下为笔记链接&#xff0c;以及全套笔记pdf版本 Clickhouse学习笔记&#xff08;1&#xff09;—— ClickHouse的安装启动_clickhouse后台启动_THE WHY的博客-C…...

vim——“Linux”

各位CSDN的uu们好呀&#xff0c;今天&#xff0c;小雅兰的内容是Linux的开发工具——vim。下面&#xff0c;我们一起进入Linux的世界吧&#xff01;&#xff01;&#xff01; Linux编辑器-vim使用 vim的基本概念 vim的基本操作 vim正常模式命令集 vim末行模式命令集 vim操…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...