关闭浏览器事件 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 ...
随机推荐
- EffectiveJava阅读笔记(一)
考虑用静态工厂方法代替构造器 一.概述 二.使用静态工厂的优势 获取类对象的两种方式: 使用公有构造方法 静态工厂方法 1.介绍 有名称 不必每次调用时创建一个新对象 可以返回原类型的任何子类型对象 ...
- 树莓派linux系统连接windows7系统中的共享文件夹的正确姿势
一.要想使用树莓派linux成功访问win7的共享文件夹而不报错,最重要的事情是要正确设置win7中共享文件的设置. 1.需要共享文件点击右键→属性 2.共享选项卡→网络和共享中心 3.点开公用下拉菜 ...
- Neo4j入门之中国电影票房排行浅析
什么是Neo4j? Neo4j是一个高性能的NoSQL图形数据库(Graph Database),它将结构化数据存储在网络上而不是表中.它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持 ...
- NET4.6下的UTC时间转换
int UTCSecond = (int)((DateTimeOffset)DateTime.SpecifyKind(DateTime.Now, DateTimeKind.Local)).ToUnix ...
- vscode指定扩展安装位置
默认情况下,(Windows)vscode的安装路径为C:\Users\用户名\.vscode\extensions. 如果想要自定义扩展的安装路径,无法直接在vscode中修改.但是,在启动vsco ...
- C#零基础入门-0-开发工具
Visual Studio sharpDevelop:http://www.icsharpcode.net/OpenSource/SD/Download/ Visual Studio Express
- js 倒计时跳转
用js实现简单的倒计时结束页面跳转效果,主要用到setInterval()和clearInterval()方法,页面跳转使用window.location.href = " ".倒 ...
- docker中镜像的提交和上传
本文介绍如何将本地的镜像上传到镜像仓库.以及上传时遇到"denied: requested access to the resource is denied"的解决方法. 原文地址 ...
- Making A Circle Out Of Squares
方形画圆 解决方案: 循环偏移5角度画方形 效果图: Python 源码 import turtle; window = turtle.Screen(); window.bgcolor("p ...
- [LeetCode] 22. 括号生成
题目链接:https://leetcode-cn.com/problems/generate-parentheses/ 题目描述: 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能 ...