博主最近遇到一个需求，需要在用户离开之前给一个提示，是否确认离开，并且用户确认离开的话，需要发出一个请求

下面直接上代码：

<!DOCTYPE HTML>

<html>

<body>

    <script>

        // 只有屏幕和用户互动过后，用户离开页面（关闭、刷新、跳转其他页面）才会触发

        window.onbeforeunload = event => {

            console.log('onbeforeload！！！！！')

            if (event) {

                event.returnValue = '关闭提示';

            }

        }

        // 不管有没有和用户互动过，只要用户离开页面（关闭、刷新、跳转其他页面）就会触发

        window.onunload = () => {

            console.log('onunload！！！！！')

            let xhr = new XMLHttpRequest();

            xhr.open('get', '/test', true)

            xhr.send()

            // 加一段同步代码阻塞一下，不然刷新会发不出去异步请求

            let now = new Date()

            while (new Date() - now < 100) { }

        }

    </script>

</body>

</html>

值得主要的点：

1.离开之前的提示无法自定义，只能是浏览器提供的文案，大概效果如下：

2.unload事件如果要发异步请求的话，需要后面给补一段同步代码阻塞一下，否则会在请求会发不出去的

页面的beforeunload和unload的事件应用的更多相关文章

  1. JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

    前言  最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限.  即使在页面 ...

  2. 定义页面的Dispose方法：[before]unload事件启示录

    前言 最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限. 即使在页面上增 ...

  3. [BS-10] 统一设置app所有页面的“返回”按钮样式

    统一设置app所有页面的“返回”按钮样式 如果想统一设置app所有页面的“返回”按钮样式,首先自定义WZNavigationController类继承UINavigationController类,然 ...

  4. WebBrowser之获取跳转页面的Document接口源码

    问题由来是这样的,今天帮一个网友解决问题,说从VC驿站下载了一个源码,程序的功能主要是在对话框上面放置了一个WebBrowser控件,程序启动的时候默认调用这句代码: m_web.Navigate(_ ...

  5. [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

  6. JavaScript写在Html页面的<head></head>中

    JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...

  7. 如何将页面的<br/>在Excel中正确换行

    在页面的<br />导致导出Excel中是会以多行的方式显示,达不到页面在一个单元格中进行换行,为此我们有以下两种方式: 1.CSS样式方式 <br style='mso-data- ...

  8. Form提交是会刷新页面的

    今天发现如果页面中有form,点击提交按钮是会刷新页面的,为了禁止页面刷新行为,可以这么做: <form class="form-horizontal" id="u ...

  9. CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

随机推荐

  1. Centos6 yum安装nginx

    1.Centos6系统库中默认是没有nginx的rpn包的,所以我们需要先更新下rpm依赖库 (1):使用yum安装nginx,安装nginx库 rpm -Uvh http://nginx.org/p ...

  2. （十）easyUI之折叠面板+选项卡+树完成系统布局

    一.效果 二 .编码 数据库设计 数据库函数设计,该函数根据父节点id 查询出所有字节点(包括孙子节点) BEGIN #声明两个临时变量 ); ); '; SET tempChd=CAST(rootI ...

  3. （九）Struts标签基础（二）

    2.3 非表单标签 2.3.1 <s:actionerror>标签, this.addActionError("错误信息1");   //使用addActionErro ...

  4. 2、JDK8中的HashMap实现原理及源码分析

    本篇提纲.png 本篇所述源码基于JDK1.8.0_121 在写上一篇线性表的文章的时候,笔者看的是Android源码中support24中的Java代码,当时发现这个ArrayList和Linked ...

  5. springboot启动流程（四）application配置文件加载过程

    所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 触发监听器加载配置文件 在上一篇文章中,我们看到了Environment对象的创建方法.同时也 ...

  6. 【shell脚本】$ 在shell脚本中的使用

    shell脚本中 '$' 与不同的符号搭配其表示的意义也会不同 特殊标志符 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数. 例如,第一个参数是$1,第二个 ...

  7. vue拦截

    ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import ...

  8. EF方式增加数据

             单条记录添加 第一种方式: public void AddRegion() { using(Northwind db = new Northwind()) { Region regi ...

  9. inux中查看各文件夹大小命令：du -h --max-depth=1

    du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-size][--exclude=<目录或文件>] [--max-de ...

  10. Redis单实例数据迁移到集群

    环境说明 单机redis redis集群 192.168.41.101:7000 master 192.168.41.101:7001 master 192.168.41.102:7000 maste ...