在做毕设的时候,需要在关闭浏览器的时候向后台服务器修改用户在线状态。首先讲一下 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. C#工具:WPF生成图片验证码

    1.使用ImageFormatConvertHelper using System; using System.Collections.Generic; using System.Drawing; u ...

  2. [转]AI+RPA 融合更智能

    本文转自:https://www.jianshu.com/p/cf25b3dfc0f0 前面已经分析过多次RPA的本质,可以参考 [脱下外衣],看看RPA机器人到底是什么?     哪些AI相关应用技 ...

  3. C# 提前异步加载数据

    前言 在我们应用程序中,如果有较大的数据需要从数据库或者本地读取,且是一次性的话,可以提前获取数据并缓存在内存中. 一般处理方法:利用应用程序启动到用户使用功能这一段时间,提前加载数据. 问题来了,因 ...

  4. 数据库缓存mybatis,redis

    简介 处理并发问题的重点不在于你的设计是怎样的,而在于你要评估你的并发,并在并发范围内处理.你预估你的并发是多少,然后测试r+m是否支持.缓存的目的是为了应对普通对象数据库的读写限制,依托与nosql ...

  5. flex练习---纵横中文网

    采用 flexbox 弹性容器进行布局,只做练习用. 浏览器打开时切换到手机模式. 样本地址: http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E ...

  6. 3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

    最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器.在此先奉上一个基于mapbox-gl实现的demo(来源:uber的deck.gl项目): 下面我们 ...

  7. 突破瓶颈,再出发 - PM过程能力成熟度5级

    尽管程度不同,但PM的每个级别都在践行过程改进,并在4级借助数据,达到了“登峰造极”的程度.随着量化与统计分析的深入,项目会被优化到极其稳定的状态,组织的过程改进也就此进入了平台期. 平台期可以被视为 ...

  8. 【English】十四、英语

    一.英语 是 词法(词) + 语法 一个个拥有词法的词,就是材料.通过语法的规则将这些词合理组合排列起来.然后,就可以干很多事了.

  9. MyDAL - .UpdateAsync() 之 .SetSegment 根据条件 动态设置 要更新的字段 使用

    索引: 目录索引 一.API 列表 1.SetSegment 属性,指示 根据条件 动态拼接 要修改的字段 见如下示例. 二.API 单表-完整 方法 举例 // update 要赋值的变量 var ...

  10. Elasticsearch 通关教程(四): 分布式工作原理

    前言 通过前面章节的了解,我们已经知道 Elasticsearch 是一个实时的分布式搜索分析引擎,它能让你以一个之前从未有过的速度和规模,去探索你的数据.它被用作全文检索.结构化搜索.分析以及这三个 ...