在做毕设的时候,需要在关闭浏览器的时候向后台服务器修改用户在线状态。首先讲一下 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. JavaScript类型相关常用操作

    JS数组,字符串,json互相转换 JS数组转字符串 使用数组自带的join方法可以把数组转化为字符串: let arr = [1,2,'uu']; let str = arr.join(','); ...

  2. ASP.NET Core 基于JWT的认证(二)

    ASP.NET Core 基于JWT的认证(二) 上一节我们对 Jwt 的一些基础知识进行了一个简单的介绍,这一节我们将详细的讲解,本次我们将详细的介绍一下 Jwt在 .Net Core 上的实际运用 ...

  3. 零基础学Python--------第10章 文件及目录操作

    第10章 文件及目录操作 10.1 基本文件操作 在Python中,内置了文件(File)对象.在使用文件对象时,首先需要通过内置的open() 方法创建一个文件对象,然后通过对象提供的方法进行一些基 ...

  4. 03 入门 - 安装MVC 5和创建应用程序

    目录索引:<ASP.NET MVC 5 高级编程>学习笔记 本篇内容: 1. ASP.NET MVC 5的软件需求 2. 安装ASP.NET MVC 5 1)安装MVC 5开发组件 2)服 ...

  5. [C#学习笔记3]关于Main(string[ ] args)中args命令行参数

    Main(string[] args)方法是C#程序的入口,程序从这里开始执行,在这里结束.C#代码逻辑要包含在一个类型(Type)中,游离的.全局的变量或函数是不存在的,这里的类型包括类(class ...

  6. 好代码是管出来的——C#的代码规范

    代码是软件开发过程的产物,代码的作用是通过编译器编译后运行,达到预期的效果(功能.稳定性.安全性等等),而另外一个重要作用是给人阅读.对于机器来说只要代码正确就能够正确的运行程序,但是人不同,如果代码 ...

  7. emacs单词首字母,单词,区域大小写转换

    从光标开始,处理单词后半部分: 快捷键 说明 M-c (capitalize-word) 首字母改为大写 M-u (upcase-word) 全部改为大写 M-l (downcase-word) 全部 ...

  8. ThreadLocal源码解读

    1. 背景 ThreadLocal源码解读,网上面早已经泛滥了,大多比较浅,甚至有的连基本原理都说的很有问题,包括百度搜索出来的第一篇高访问量博文,说ThreadLocal内部有个map,键为线程对象 ...

  9. 如何在element-UI 组件的change事件中传递自定义参数

    以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态. 下面这样写是无效的: @change=& ...

  10. git 多用户多仓库配置

    ssh全称是Secure Shell,即安全Shell,是一种可以进行安全远程登录的协议,在Linux中以OpenSSH为代表,Windows中则有Putty作为实现.ssh的会话建立阶段类似TCP协 ...