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

最新推荐文章于 2024-06-16 19:46:16 发布
最新推荐文章于 2024-06-16 19:46:16 发布
阅读量2k 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jmc_wax/article/details/131262138
版权

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

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

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

jmc_wjx
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript监听页面刷新和页面关闭事件方法详解
10-20
由于`onunload`事件触发时页面已经处于卸载状态，因此无法阻止页面的关闭。 示例代码： 1. 在HTML元素中添加`onunload`事件： ```html ()"> function fun() { // 执行清理工作 } ``` 然而，由于现代浏览器的...
js关闭或者刷新页面后执行事件
WGH100817的博客
02-12 375
onbeforeunload 使用方法 window.onbeforeunload=function(){ 　　return ‘’; } 有返回值才能弹出显示，或者有需要执行的事件也行。 转载于:https://www.cnblogs.com/jpfss/p/8444907.html...
监听页面刷新
weixin_44545895的博客
04-15 789
window.addEventListener('beforeunload', () => { console.log("页面刷新了") })
轻松实现H5页面下拉刷新：滑动触发、高度提示与数据刷新全攻略
最新发布
hello ice cream
06-16 867
前段时间在做小程序到H5的迁移，其中小程序中下拉刷新的功能引起了产品的注意。他说到，哎，我们迁移后的H5页面怎么没有下拉刷新，于是乎，我就急忙将这部分的内容给填上。本来是计划使用成熟的组件库来实现，尝试之后发现这些组件和我们H5页面的其他逻辑有冲突（H5还有吸顶、锚点、滑动高亮、横向滚动），小小H5页面上承载了太多的功能，兼容起来非常麻烦，想着下拉刷新功能也不复杂，干脆我自己写一个好了。
监听浏览器关闭按钮点击事件 -- 使用JS
伊凡个人博客
08-19 1309
Onunload与Onbeforeunload Onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过window.onunload来指定或者在里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。 Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器...
JS监听浏览器关闭、刷新及切换标签页触发事件
m0_51431448的博客
08-03 8926
蛮简单的东西，知道就会，不知道就不会，没什么逻辑可言。简单记录一下，只为加深点儿印象。
javascript监听页面刷新事件
weixin_42987525的博客
08-12 1万+
代码】javascript监听页面刷新事件。
js 监听浏览器刷新操作
PrimaryColor
09-24 1万+
代码： window.addEventListener("beforeunload", function (e) { //不是所有浏览器都支持提示信息的修改 var confirmationMessage = "请先保存您编辑的内容,否则您修改的信息会丢失。"; e.returnValue = confirmationMessage; return confirmationMessage; }); ......
监听浏览器自带刷新、前进、回退、关闭标签页、切换标签页
qq_43815571的博客
04-17 3588
其次，我们可以提供计算时间差判断当前监听的是刷新还是关闭标签页，这个的时间差是存在误差的，因此存在可能不适用于小部分情况或者浏览器。如果需要同时有监听浏览器前进回退方法，需要在浏览器刷新的地方重新注册监听事件。1.3 页面刷新时先执行onbeforeunload事件，然后onunload事件，最后onload事件。3、监听浏览器自带刷新按钮，是无法精确识别到当前进行的操作（同时会监听标签页关闭和刷新方法）2、监听浏览器自带前进回退按钮，是无法精确识别到当前进行的操作（同时会监听前进和回退方法）
vuejs中监听窗口关闭和窗口刷新事件的方法
12-03
在Vue.js应用中，有时我们需要监听窗口的关闭和刷新事件，以便执行某些操作，比如保存用户数据或确认离开页面。本文将详细介绍两种在Vue.js中实现这一目标的方法。 首先，我们来了解一下`window.onbeforeunload`...
JS针对浏览器窗口关闭事件的监听方法集锦
10-22
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
Vue监听页面刷新和关闭功能
12-09
总的来说，Vue.js的生命周期钩子与JavaScript原生事件相结合，可以帮助我们有效地处理页面刷新和关闭时的业务逻辑。理解这些事件和钩子的工作原理对于构建健壮的Web应用至关重要。记住，合理的数据管理和事件监听是...
js监听浏览器关闭页面事件
热门推荐
佳佳鸽的博客
01-24 1万+
window.onbeforeunload = function() { //功能函数 } window.onbeforeunload = function(e) { var e = window.event ||e; e.returnValue=("是否确定关闭页面"); } 加入js文件后，查看网页效果： 点击网页对应窗口的关闭按钮，会弹窗如下弹窗： ...
JS监听刷新事件
不积跬步，无以至千里
04-18 2329
文章目录前言代码F5有效刷新鼠標右键刷新有效 前言 网页有时候需要监听到用户的刷新事件。 代码 F5有效刷新 document.onkeydown=function(e){ e=e||window.event; if(e.keyCode==116){//116 是f5按键代码 //your code here } } 鼠標右键刷新有效 window.onbeforeunload=function(e){ var msg='您网页上有东西未保存'; e=e||window.event;
javascript监听页面刷事件
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 955
javascript监听页面刷事件
监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏
qq_40591925的博客
08-08 9919
注: onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。
js 实现页面隐藏、关闭、刷新给出对应的提示
CodingNoob
10-26 4462
我们在做项目的时候经常会遇到一些需求，比如在某些页面当点击浏览器刷新 或者关闭的时候会有对应的提示，是否离开或者重新加载此网站。比如csdn写文章的时候就有这个弹窗，这功能就是用onbeforeunload实现的。浏览器切换其他页面或者最小化的时候触发，（ps: 常用于检测考试作弊行为）一般来说，我们希望使用 Page Visibility API，在用户没有看到页面时停止不必要的进程，或者执行一些后台操作。可以下面这几种情况：当用户离开页面时，暂停视频、轮播图或动画。停止一些实时获取数据的API。
js 监听浏览器页面关闭事件
PrimaryColor
05-25 5620
方法： window.onbeforeunload = function() { //功能函数 } 如果想阻止关闭，给一个确认弹窗： window.onbeforeunload = function(e) { var e = window.event ||e; e.returnValue="确认关闭页面吗？"; } 不过returnValue给的字符是没有用的，浏览器始终都只会返回固定的提示，如下： ...
JavaScript中怎么监听页面刷新事件
04-05
可以使用以下方法监听页面刷新事件： 1. 使用window.onbeforeunload事件：当用户离开页面或刷新页面时，该事件将被触发。可以在该事件中添加你想要执行的代码。 ```javascript window.onbeforeunload = function() { // 添加你想要执行的代码 }; ``` 2. 使用window.onunload事件：当用户离开页面或刷新页面时，该事件将被触发。可以在该事件中添加你想要执行的代码。 ```javascript window.onunload = function() { // 添加你想要执行的代码 }; ``` 3. 使用window.addEventListener()方法监听load事件并在该事件中添加你想要执行的代码。 ```javascript window.addEventListener("load", function() { // 添加你想要执行的代码 }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值