关闭浏览器事件 onbeforeunload和onunload
在做毕设的时候,需要在关闭浏览器的时候向后台服务器修改用户在线状态。首先讲一下 onbeforeunload 和 onunload(都是在刷新或关闭时调用) 的区别:
(1)onbeforeunload:在即将离开当前页面(刷新或关闭)时触发,即正要去服务器读取新的页面时调用,此时还没开始读取。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。兼容方面如下:
- IE、Safari 完美支持
- Firefox、Chrome 不支持文字提醒信息
- Opera 不支持
(2)onunload:在用户退出页面时发生,即已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。该事件可用于当用户离开页面时发生的事件(通过点击一个连接,提交表单,关闭浏览器窗口等等。)。兼容方面如下:
- IE浏览器 页面跳转、刷新页面能执行,但关闭浏览器不能执行;
- firefox 页面跳转能执行,但刷新页面、关闭浏览器不能执行;
- Safari 刷新页面、页面跳转,关闭浏览器都会执行;
- Opera、Chrome任何情况都不执行。
综上所述,onunload是无法阻止页面的更新和关闭的,而 onbeforeunload 可以做到。但注意的是请求需要同步,我觉得应该是采用异步方法,那么浏览器会在方法成功发送并响应前先unload,从而导致请求丢失。如果采用的是同步方法,浏览器就会等待请求成功,然后再unload。
因为我项目的接口请求是用axios统一封装代码,而且没找到方法让axios的请求方法变成同步,所以我用了jQuery的ajax请求方法,代码如下:

关闭浏览器事件 onbeforeunload和onunload的更多相关文章
- JS监听关闭浏览器事件
Onunload与Onbeforeunload Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或 ...
- js关闭浏览器事件,js关闭浏览器提示及相关函数
关于浏览器关闭事件的相关描述 有些朋友想在浏览器关闭的时候,弹出alert .confirm或者prompt等.实验证明,这种做法是失败的,原因是浏览器关闭事件自动屏蔽执行js的某些方法,从而防止恶意 ...
- JS 关闭 页面 浏览器 事件
JS监听关闭浏览器事件关键字: js监听关闭浏览器事件Onunload与OnbeforeunloadOnunload,onbeforeunload都是在刷新或关闭时调用,可以在<script&g ...
- jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台onbeforeunload、onunload
jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台 onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...
- 【原】js离开页面执行函数 onbeforeunload与onunload事件
在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunlo ...
- onbeforeunload与onunload事件
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...
- js关闭浏览器窗口事件
js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script typ ...
- 关闭浏览器时提示的javascript事件
onbeforeunload事件 它是这样用的: <script language="javascript"> g_blnCheckUnload = true; fun ...
随机推荐
- 个人对【依赖倒置(DIP)】、【控制反转(IOC)】、【依赖注入(DI)】浅显理解
一.依赖倒置(Dependency Inversion Principle) 依赖倒置是面向对象设计领域的一种软件设计原则.(其他的设计原则还有:单一职责原则.开放封闭原则.里式替换原则.接口分离原则 ...
- jQuery(三)、属性、CSS
jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...
- redis.conf常用配置说明
最近学了 Redis,在 Linux 上安装的,接下来就简单讲解一下修改 Redis 配置文件 修改密码: 新安装的 Redis 是默认没有密码的,可以给Redis设置一个密码 先进入 Redis 的 ...
- Django学习之九: auth 认证组件
目录 Django auth 认证组件 配置使用auth组件及其中间件 request.user 可以直接在template模版中使用 auth组件常用api 获取认证model类 认证检测装饰器@l ...
- Nano Server速记
入门参考https://docs.microsoft.com/zh-cn/windows-server/get-started/nano-server-quick-start 1.创建VHD Impo ...
- vivo7.0以上系统如何无需Root激活Xposed框架的方法
在较多公司的引流或者业务操作中,基本都需要使用安卓的黑高科技术Xposed框架,几天前我们公司购买了一批新的vivo7.0以上系统,基本都都是基于7.0以上版本,基本都不能够获取Root的su超级权限 ...
- <自动化测试方案_8>第八章、手机端UI自动化测试
第八章.手机端UI自动化测试 (一)APP测试分类 1,原生APP:Native页面是使用原生系统内核的,相当于直接在系统上操作 2,H5APP:先调用系统的浏览器内核,相当于是在网页中进行操作,较原 ...
- Linux学习历程——Centos 7 chown命令
一.命令介绍 Linux是多人多工操作系统,所有的文件皆有拥有者.利用 chown 将指定文件的拥有者改为指定的用户或组, 用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改 ...
- .net解析csv(C#导表工具)
前言 解析Excel有知名的NPOI库,(Java语言是POI),但是NPOI是不支持解析csv的. csv本质上也是文本文件,可以进行差异对比,更利于解决冲突. 本文对解析csv的几个.net的开源 ...
- 原创|1分钟搞定 Nginx 版本的平滑升级与回滚
Nginx无论是对于运维.开发.还是测试来说,都是日常工作需要掌握的一个知识点,之前也写过不少关于Nginx相关的文章: Nginx服务介绍与安装 Nginx服务配置文件介绍 Nginx配置虚拟主机 ...