js 监听 页面 刷新 关闭 时 所触发的事件

最新推荐文章于 2024-04-24 15:50:47 发布
最新推荐文章于 2024-04-24 15:50:47 发布
阅读量2.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jmc_wax/article/details/131262138
文章探讨了onbeforeunload和onunload两个事件在页面关闭或刷新时的触发顺序和限制。onbeforeunload先于onunload执行，且能阻止onunload的默认行为，常用于创建离开提醒。然而，onunload事件内无法执行异步ajax，需借助navigator.sendBeacon发送请求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这篇文章我们来了解一下  页面关闭或刷新时 触发的几个事件 onbeforeunload 和 onunload

 这两个方法中 onbeforeunload 方法  这个方法是要比 onunload 先执行的  并且它可以阻止 onunload 方法的执行 onbeforeunload 方法里可以家伙是那个弹窗做成类似于离开网页时的提醒 其他博客帖子里说这个方法写在<body> 或者使用 window.onbeforeunload 可以在页面刷新或者关闭的时候触发 你在这里面执行的方法但是我在使用的时候只有 window.onbeforeunload 这样写他里面的方法才可以正常执行并且只有刷新的时候才会执行关闭的时候是不执行的 可能是我哪里没用对

onunload  事件这个是页面刷新或关闭的时候都会执行 但是它里面无法写异步的ajax 只能将ajax 改成同步执行才能生效 但是我这边使用的时候不论是同步还是异步都是无法执行的 并且他里面弹窗是无法执行的  所以想要在 这里面执行请求只能使用   navigator.sendBeacon() 来进行请求  

jmc_wjx
关注
javascript监听页面刷事件
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 1289
javascript监听页面刷事件
JS监听浏览器关闭、刷新及切换标签页触发事件
m0_51431448的博客
08-03 1万+
蛮简单的东西，知道就会，不知道就不会，没什么逻辑可言。简单记录一下，只为加深点儿印象。
JSP关闭触发事件，当点关闭页面按钮触发JS函数、事件
曾昭武
01-06 8788
学习分享必看：javacto.taobao.com //第一种方法 window.onbeforeunload = function() {     var n = window.event.screenX - window.screenLeft;     var b = n &gt; document.documentElement.scrollWidth-20;     if(b &amp...
JavaScript监听浏览器刷新或是关闭事件
weixin_34101784的博客
06-26 828
JS监听关闭浏览器事件 关键字: js监听关闭浏览器事件 Onunload与Onbeforeunload Onunload，onbeforeunload都是在刷新或关闭时调用，可以在&lt;script&gt;脚本中通过window.onunload来指定或者在&lt;body&gt;里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。...
js监听页面的刷新与关闭
01-20
使用javascript实现监听页面的刷新与关闭，可在用户刷新或关闭窗口时执行相关操作。
监听页面刷新/关闭事件
天高任鸟飞
04-24 833
【代码】监听页面刷新/关闭事件。
监听浏览器关闭按钮点击事件 -- 使用JS
伊凡个人博客
08-19 1411
Onunload与Onbeforeunload Onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过window.onunload来指定或者在里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。 Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器...
javascript监听页面刷新事件
热门推荐
weixin_42987525的博客
08-12 1万+
代码】javascript监听页面刷新事件。
javascript监听页面刷新和页面关闭事件方法详解
11-28
JavaScript中的`onbeforeunload`和`onunload`事件是页面生命周期中的两个重要事件，它们用于监听和处理用户离开页面的情况，比如页面刷新或关闭。这两个事件可以帮助开发者在用户离开页面前执行某些操作，如保存数据...
Vue监听页面刷新和关闭功能
10-16
本文将详细介绍如何使用Vue.js监听页面刷新和关闭事件，以及如何结合JavaScript事件来实现这一功能。 首先，Vue的生命周期钩子函数是处理这类问题的关键。在Vue组件中，`beforeDestroy`生命周期钩子可以用来在组件...
vuejs中监听窗口关闭和窗口刷新事件的方法
12-03
在Vue.js应用中，有时我们需要监听窗口的关闭和刷新事件，以便执行某些操作，比如保存用户数据或确认离开页面。本文将详细介绍两种在Vue.js中实现这一目标的方法。 首先，我们来了解一下`window.onbeforeunload`...
js实现监听浏览器关闭和刷新事件
04-16
js实现监听浏览器关闭和刷新事件支持三大浏览器，点击直接看效果
javascript页面关闭事件
01-27
javascript页面关闭触发事件 非常实用
JS监听关闭浏览器事件
12-18
JS 监听 关闭浏览器事件
vue项目使用js监听浏览器关闭、刷新、后退事件
乐辞的博客
12-04 1万+
在Web应用开发中，我们经常会遇到这样的需求：在用户执行关键操作，如提交表单、支付交易等过程中，突然关闭、刷新或者后退浏览器，可能会导致操作未完成或者数据丢失。为了提高用户体验和保证应用数据的完整性，我们需要合理地使用JavaScript来监听浏览器关闭、刷新、后退事件，并作出相应处理。事件是在页面即将卸载时触发的，这通常发生在用户关闭或刷新页面之前。事件，如果不是非常必要，最好不要使用，因为它可能会影响用户体验。在Vue项目中，如果你使用。在使用上述事件时，我们应当小心谨慎，避免阻碍用户的正常操作。
javascript当关闭网页时可以触发的事件
wddrosa的专栏
12-16 733
function   closeIt() { if(event.clientX> document.body.clientWidth&&event.clientY { //window.event.returnValue= "确定要退出本页吗? "; alert( '我要退出啦！ ') //document.frames.exitframes.location.reload
javascript监听页面关闭事件
程序员老狼专注开发aigc或客服系统应用
10-06 1189
在开发在线客服系统的时候，我需要在客服关闭后台页面的时候，触发一下接口记录 $(window).bind('beforeunload',function(){ //操作 return 1 }); ...
js关闭或者刷新页面后执行事件
WGH100817的博客
02-12 420
onbeforeunload 使用方法 window.onbeforeunload=function(){ 　　return ‘’; } 有返回值才能弹出显示，或者有需要执行的事件也行。 转载于:https://www.cnblogs.com/jpfss/p/8444907.html...
js 监听浏览器页面关闭事件
PrimaryColor
05-25 5857
方法： window.onbeforeunload = function() { //功能函数 } 如果想阻止关闭，给一个确认弹窗： window.onbeforeunload = function(e) { var e = window.event ||e; e.returnValue="确认关闭页面吗？"; } 不过returnValue给的字符是没有用的，浏览器始终都只会返回固定的提示，如下： ...
window的监听onupload事件，页面刷新时也会触发吗
最新发布
12-12
在JavaScript中，`onupload`事件是用于监听文件上传操作的。如果你在页面上使用这个事件监听器，通常情况下，页面刷新时不会触发`onupload`事件。`onupload`事件只有在用户执行了文件上传操作时才会被触发。 然而，页面刷新时可能会触发其他事件，例如`beforeunload`或`unload`事件，这些事件用于处理页面卸载前的清理工作。如果你希望在页面刷新时执行某些操作，可以监听这些事件。 以下是一个简单的示例，展示了如何监听`onupload`事件和页面刷新事件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Upload Event Example</title> </head> <body> <input type="file" id="fileInput"> <script> document.getElementById('fileInput').addEventListener('change', function(event) { if (event.target.files.length > 0) { console.log('File selected:', event.target.files[0].name); } }); window.addEventListener('beforeunload', function(event) { // 标准浏览器会忽略自定义消息 event.preventDefault(); event.returnValue = ''; }); window.addEventListener('unload', function(event) { // 清理工作 console.log('Page is unloading'); }); </script> </body> </html> ``` 在这个示例中： 1. 当用户选择一个文件时，`change`事件会被触发，并执行相应的回调函数。 2. 当页面即将刷新或关闭时，`beforeunload`事件会被触发。 3. 当页面已经卸载时，`unload`事件会被触发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值