前端监听浏览器关闭事件
在 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)=>{
debugger
console.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));
});
以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
4
0- 0
已为社区贡献5条内容
所有评论(0)