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

下面直接上代码：

<!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. VMware Workstation虚拟机安装

    VMware Workstation虚拟机安装 我们缺乏资金, 所以吃土.我们想搭 hadoop 集群, redis 集群, k8s 集群, 怎么办? 用虚拟机!! 一. 安装普通版本(Worksta ...

  2. 轻松搭建CAS 5.x系列(8)-在CAS Server增加双因素认证（DUO版）

    概述说明 为了让系统更加安全,很多登录会加入双因素认证.何为双因素,如果把登陆作为开一扇门的话,那就是在原来的锁上再加一把锁,第二锁用新的钥匙,这样安全系数就更加高了. CAS是通过账号名和密码来认证 ...

  3. MH-P虚拟机DSR中安装SQL2008

    双击下载好的安装文件setup.exe.(注意:安装之前请确认是否有安装SQL Server 2008 R2需要的.NET Framework 3.5 SP1,我的环境由于之前有配置安装过,在这里不具 ...

  4. Quartz.net任务调度（石英钟定时任务）

    好了,现在具体来说一下怎么使用Quartz.net 2.0. 1.到网上下载Quartz.net 2.0,下载完后解压,里面有vs.net2008和vs.net2010两个版本. 2.新建一个空项目, ...

  5. 结合python实现的netcat与python实现的tcp代理，建立一个流量隧道

    在proxy中 python2 proxy.py 127.0.0.1 3334 192.158.1.111 80 true 作为服务器在本地3334端口进行监听, 作为客户端连接远程web服务器192 ...

  6. Seaborn（二）之数据集分布可视化

    Seaborn(二)之数据集分布可视化 当处理一个数据集的时候,我们经常会想要先看看特征变量是如何分布的.这会让我们对数据特征有个很好的初始认识,同时也会影响后续数据分析以及特征工程的方法.本篇将会介 ...

  7. Java中的ThreadLocal详解

    一.ThreadLocal简介 多线程访问同一个共享变量的时候容易出现并发问题,特别是多个线程对一个变量进行写入的时候,为了保证线程安全,一般使用者在访问共享变量的时候需要进行额外的同步措施才能保证线 ...

  8. oracle学习笔记：update一整列 关联更新

    普通的 update 都是根据条件来对部分列的内容进行修改,用法如下: update temp_cwh_table set name = 'xxx' where id = 1; 假设现在有2张表:A. ...

  9. JS数组抽奖程序教学实例

    数组Javascript中非常重要的知识点,为了在课堂上提高学生兴趣,教学举例的选择就比较重要了. 为了提高学生兴趣,特设计一个可输入,可控制结束的,利用JS数组实现的抽奖教学实例.代码如下:

  10. iOS - 解决警告“ld: Warning: Directory Not Found for Option”

    有时候我们可能从项目中删除了某个目录.文件以后,编译出现警告信息: ld: warning: directory not found for option“XXXXXX” 具体类似下图: 很奇怪,为什 ...