在做毕设的时候,需要在关闭浏览器的时候向后台服务器修改用户在线状态。首先讲一下 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的更多相关文章

  1. JS监听关闭浏览器事件

    Onunload与Onbeforeunload Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或 ...

  2. js关闭浏览器事件,js关闭浏览器提示及相关函数

    关于浏览器关闭事件的相关描述 有些朋友想在浏览器关闭的时候,弹出alert .confirm或者prompt等.实验证明,这种做法是失败的,原因是浏览器关闭事件自动屏蔽执行js的某些方法,从而防止恶意 ...

  3. JS 关闭 页面 浏览器 事件

    JS监听关闭浏览器事件关键字: js监听关闭浏览器事件Onunload与OnbeforeunloadOnunload,onbeforeunload都是在刷新或关闭时调用,可以在<script&g ...

  4. jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台onbeforeunload、onunload

    jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台  onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...

  5. 【原】js离开页面执行函数 onbeforeunload与onunload事件

    在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunlo ...

  6. onbeforeunload与onunload事件

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...

  7. 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异

    转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...

  8. js关闭浏览器窗口事件

    js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script typ ...

  9. 关闭浏览器时提示的javascript事件

    onbeforeunload事件 它是这样用的: <script language="javascript"> g_blnCheckUnload = true; fun ...

随机推荐

  1. 基于vue-cli快速构建

    基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a   Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...

  2. [TCP/IP] 传输层-ethereal 抓包分析TCP包

    开启抓包工具抓取一个HTTP的GET请求,我的ip是10.222.128.159    目标服务器ip是140.143.25.27 握手阶段: 客户端 ===> SYN MSS=1460(我能接 ...

  3. Spring入门(一):创建Spring项目

    本篇博客作为Spring入门系列的第一篇博客,不会讲解什么是Spring以及Spring的发展史这些太理论的东西,主要讲解下如何使用IntelliJ IDEA创建第一个Spring项目以及通过一个示例 ...

  4. 对于python爬虫urllib库的一些理解(抽空更新)

    urllib库是Python中一个最基本的网络请求库.可以模拟浏览器的行为,向指定的服务器发送一个请求,并可以保存服务器返回的数据. urlopen函数: 在Python3的urllib库中,所有和网 ...

  5. MySQL数据库在IO性能优化方面的设置选择(硬件)

    提起MySQL数据库在硬件方面的优化无非是CPU.内存和IO.下面我们着重梳理一下关于磁盘I/O方面的优化. 1.磁盘冗余阵列RAID RAID(Redundant Array of Inexpens ...

  6. MySQL下载与MySQL安装图解(MySQL5.7与MySQL8.0)

    MySQL下载与MySQL安装图解(MySQL5.7与MySQL8.0) 1.MySQL下载(MySQL8.0社区版) mysql下载方法,请根据风哥以下步骤与图示来下载mysql8.0最新社区版本: ...

  7. Linux ssh登陆慢的两种原因分析

    Linux ssh登陆慢的两种原因分析 如果做运维就一定会遇到ssh登陆Linux服务器慢的问题,问题比较好解决,一般Google之后有很多文章都告诉你解决方法,但是很少有文章分析为什么会慢,这篇文章 ...

  8. File operations 1

    1:只读(‘r' 和 ’rb'以字节读) f = open('d:\模特主妇护士班主任.txt',mode='r',encoding='UTF-8') content = f.read() print ...

  9. docker 发布方式尝试

    docker 发布方式尝试 目前有个小项目, 尝试用docker的方式来发布, 项目只有一个节点, 使用 kubenate 有点小题大做, 所以采用docker-compose来发布. 发布过程 GI ...

  10. Web前端教程3-JavaScript教程

    目录 1. JavaScript介绍 1.1. JS嵌入页面的方式 2. JS基本语法 2.1. 变量类型 2.2. 获取元素方法 2.3. 操作元素属性 2.4. innerHTML的使用 3. J ...