前端监听浏览器关闭事件

在 beforeunload 事件中,无法直接监听离开按钮的点击事件,也不能为 event.currentTarget 添加 close 事件监听器来获取离开按钮的相关事件。
beforeunload 事件主要用于在页面即将卸载(刷新或关闭)时进行一些必要的处理,例如提示用户是否确认离开、保存一些临时数据等。当该事件被触发时,浏览器会显示一个默认或自定义的提示框,但浏览器通常不会提供直接获取离开按钮点击事件的方法。
如果你想在页面关闭或刷新前执行某些操作,可以在 beforeunload 事件的处理函数中进行相应的处理

下面代码保存为html可以作为测试使用,在浏览器打开测试使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>web</title><style>.github-corner:hover .octo-arm {animation: octocat-wave 560ms ease-in-out}@keyframes octocat-wave {0%, 100% {transform: rotate(0)}20%, 60% {transform: rotate(-25deg)}40%, 80% {transform: rotate(10deg)}}@media (max-width: 500px) {.github-corner:hover .octo-arm {animation: none}.github-corner .octo-arm {animation: octocat-wave 560ms ease-in-out}}</style>
</head>
<body>
<div id="app"></div>
</a><script >
let ev =null
window.addEventListener('beforeunload', function(event,close) {// 自定义提示信息console.log(event,'event',close)event.returnValue = '确定要离开吗234545?'; // 部分浏览器可能需要设置这个属性来兼容// return '确定要离开吗?'; //这个是不能使用的event.currentTarget.close((e)=>{debuggerconsole.log(e,'eeee')})}); 
// function a(){
//   ev.addEventListener('close',function(e){
//     console.log(e,'gg')
//   })
// }
// a()
</script><!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<!--<script type="module" src="/public/iconfont.js"></script>-->
</body>
</html>

这段代码使用了 window 对象的 unload 事件和 navigator.sendBeacon() 方法来实现在页面卸载时向服务器发送数据。
window.addEventListener(‘unload’, (e) => {…}) 为 unload 事件添加了一个监听函数。unload 事件会在页面卸载(例如关闭页面、跳转到其他页面)时触发。
在这个监听函数内部:
定义了一个数据对象 data ,其中包含要发送的数据。
navigator.sendBeacon(‘/your-backend-url’, JSON.stringify(data)) :使用 navigator.sendBeacon() 方法向指定的 URL(/your-backend-url)发送数据。
navigator.sendBeacon() 方法的特点是:
它是一种异步发送数据的方式,不会阻塞页面的卸载过程,这有助于提高用户体验,避免因为发送数据而导致页面关闭延迟。
但是,并不能保证数据一定能成功发送到服务器,可能会受到网络等因素的影响。
需要注意的是:
发送的数据量通常有限制(一般为 64KB 左右)。
由于是在页面卸载时发送数据,可能无法获取到服务器的响应。
这种方式通常适用于一些不太关键的数据统计或日志记录等场景,例如记录用户的访问时长、页面浏览路径等,而对于关键的业务数据,可能需要在用户操作过程中及时保存或使用其他更可靠的方式进行处理。

window.addEventListener('unload', (e) => {const data = { /* 要发送的数据对象 */ };navigator.sendBeacon('/your-backend-url', JSON.stringify(data));
});

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

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

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

相关文章

Java文件IO操作知识点

关于文件 关于IO的定义 I:input输入 O:output输出,这是一套人为规定的规则,下面这个图方便我们理解输入输出的定义,统一以CPU为基准 在操作系统中其实把很多的资源都抽象成文件,我们在这里所说的文件就是"狭义"文件,平时保存在硬盘上的文件, 文件夹也是一种文件,我们…

mysql的数据往hive进行上报时怎么保证数据的准确性和一致性

在将MySQL的数据往Hive进行上报时&#xff0c;确保数据的准确性和一致性可以通过下面一系列步骤来实现 一、准备工作 环境配置&#xff1a; 确保MySQL和Hive环境已经安装并配置好&#xff0c;且都处于可运行状态。检查Hadoop集群&#xff08;Hive通常运行在Hadoop之上&#x…

「iOS」自定义cell与cell的复用

iOS学习 前言一&#xff1a;TableView协议二&#xff1a;cell的复用Cell的复用原理自定义cell总结 前言 UITableView是iOS开发中不可或缺的一部分&#xff0c;它是苹果iOS SDK提供的一种用于展示数据列表的视图控件。我们对其中的cell进行自定义&#xff0c;即可得到我们需要的…

Python 实现股票指标计算——BBI

BBI (Bull And Bear lndex) - 多空指标 1 公式 3日均价 3日收盘价之和 / 36日均价 6日收盘价之和 / 612日均价 12日收盘价之和 / 1224日均价 24日收盘价之和 / 24BBI (3日均价 6日均价 12日均价 24日均价) / 4 2 数据准备 我们以科创50指数 000688 为例&#xff0c…

Qt 学习第一天:安装VS和Qt

本人更换了一台新的电脑&#xff0c;使用联想电脑管家传输文件后没有安装VS&#xff0c;导致出现了以下问题&#xff1a; 疯狂查资料问人。弄了一个晚上加上午一个多小时之后&#xff0c;还是决定删掉原来的文件夹&#xff0c;重新下载一个 一、安装VS&#xff08;Visual Stud…

肿瘤病人的护理

一、肿瘤病人的心理护理 肿瘤患者往往面临巨大的心理压力和恐惧&#xff0c;心理护理至关重要。 倾听与理解 耐心倾听患者的倾诉&#xff0c;让他们表达内心的担忧、恐惧和不安。例如&#xff0c;一位肺癌患者可能会担心治疗效果和家庭经济负担&#xff0c;护理人员要给予充分的…

Aurora MySQL 负载突增应对策略与优化方案

在面对 Aurora MySQL 负载突增的情况下,我们需要深入理解其工作原理,并探讨可行的优化方案。本文将详细分析 Aurora MySQL 的负载均衡机制,解读性能监控指标,并提出几种可能的解决方案,包括已实施的措施和未来的优化方向。 1. Aurora MySQL 的负载均衡机制 Aurora MySQL…

简单工厂模式、工厂模式和抽象工厂模式的区别

简单工厂模式、工厂模式和抽象工厂模式都是创建型设计模式&#xff0c;它们之间在目的、实现方式和适用场景上存在显著的区别。以下是对这三种模式的详细比较&#xff1a; 一、定义与目的 简单工厂模式&#xff08;Simple Factory Pattern&#xff09; 定义&#xff1a; 简单工…

算法项目报告:物流中的最短路径问题

问题描述 物流问题 有一个物流公司需要从起点A到终点B进行货物运输&#xff0c;在运输过程中&#xff0c;该公司需要途径多个不同的城市&#xff0c;并且在每个城市中都有一个配送站点。为了最大程度地降低运输成本和时间&#xff0c;该公司需要确定经过哪些配送站点&#xff…

Android:requestLayout、invalidate 和 postInvalidate 的区别

提醒&#xff1a;下面源码来自SDK里Android-34版本 一、requestLayout 点击查看requestLayout官网文档 1.1 requestLayout方法源码 /*** Call this when something has changed which has invalidated the* layout of this view. This will schedule a layout pass of the v…

Java:RestTemplate返回值报错LinkedHashMap cannot be cast

问题描述 使用SringBoot提供的RestTemplate发起http请求&#xff0c;类型转换成了LinkedHashMap DataEntity result restTemplate.getForObject(url, DataEntity.class);报错信息如下 java.lang.ClassCastException: java.util.LinkedHashMap cannot be cast to com.demo.…

跟着GPT学设计模式之模板模式

你好&#xff0c;这里是codetrend专栏“跟着GPT学设计模式”。 说明 提示词: 对模板模式进行定义说明&#xff0c;优缺点说明。 模板模式&#xff0c;全称是模板方法设计模式&#xff0c;英文是 Template Method Design Pattern。模板模式是一种行为型设计模式&#xff0c;它定…

watch监听vue2与vue3的写法

watch的属性值 handler:回调函数, 即监听到变化时应该执行的函数&#xff0c;可以是单独的函数或带有 immediate 和 deep 属性的对象watch: {someProperty: function(newVal, oldVal) {// 处理逻辑}}deep: 其值是true或false, 当属性值是对象或数组时&#xff0c;深度观察会监…

C++ :友元类

友元类的概念和使用 (1)将类A声明为B中的friend class后&#xff0c;则A中所有成员函数都成为类B的友元函数了 (2)代码实战&#xff1a;友元类的定义和使用友元类是单向的 (3)友元类是单向的&#xff0c;代码实战验证 互为友元类 (1)2个类可以互为友元类&#xff0c;代码实战…

DP讨论——组合模式

学而时习之&#xff0c;温故而知新。 组合模式 和代理模式相比 和代理模式相比&#xff0c;有点类似。引用类和被引用类都继承于同一个接口类。 但是感觉组合模式是对代理模式的更加丰富化&#xff08;升级版、超进化&#xff09;&#xff0c;集合化或者说聚合化。 组合模…

高并发小结

高并发是指系统能够处理大量的并发请求的能力。处理高并发问题需要从多个层面进行优化&#xff0c;包括架构设计、代码优化、数据库优化和运维管理等。以下是一些处理高并发的关键技术和方法&#xff1a; 1. 架构设计 分布式架构&#xff1a;将系统功能分解为多个独立的服务&…

linux学习笔记整理: 关于linux:Redis数据库 2024/7/20;

Redis数据库: 自理解: 通过Map(多层字典类型)进行存储查找资源,key为字符串,value可为多种类型; Redis介绍 Redis是一种开放源代码&#xff08;BSD许可&#xff09;的内存中数据结构存储&#xff0c;用作数据库&#xff0c;缓存和消息代理。Redis提供数据结构&#xff0c;例如字…

tmp - configmap动态更新配置?

# 这是刚刚更新过的configmaps controlplane $ k describe configmaps nginx-conf Name: nginx-conf Namespace: default Labels: <none> Annotations: <none> Data nginx.conf: ---- user nginx; worker_processes 1; events { worker_co…

react-draft-wysiwyg API

目录 一、class / style(样式) 二、state(编辑器状态) 三、toolbar(工具栏) 四、localization(语言翻译) 五、mention / hashtag(提及) mention hashtag 六、callbacks(回调) toolbar 配置 一、class / style(样式) wrapperClassName: 工具栏 编辑区 classNameedito…

【LeetCode】二叉树的最大深度

目录 一、题目二、解法完整代码 一、题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 示例 2&#x…