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

下面直接上代码：

<!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. 音视频入门-04-BMP图像四字节对齐的问题

    * 音视频入门文章目录 * BMP 图像四字节对齐 表示 BMP 位图中像素的位元是以行为单位对齐存储的,每一行的大小都向上取整为4字节(32 位 DWORD)的倍数.如果图像的高度大于 1,多个经过 ...

  2. （十一）web服务与javaweb结合（2）

    一.解决问题及解决方法 解决问题:上章节用监听器的方式是有缺陷的:web服务的端口和web工程的端口不能一致. 解决方案:将webService绑定到web工程中,使得共用一个端口. 二.案例 2.1 ...

  3. 一个因MySQL大小写敏感导致的问题

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 00 MYSQL对大小写敏感 见字如面,见标题知内容.你有遇到过因为MYSQL对大小写敏感而被坑的体验吗? 之前看过阿里巴 ...

  4. java封装数据类型——Long

    Long 是长整型 long 的封装数据类型.我们知道 long 相对于 int 的差异就是数据表示的范围扩大了,其它大部分特性都是一样的.所以 Long 跟 Integer 大部分方法都是相同的. ...

  5. WordPress，SAP Kyma和微信三者的集成

    我们来继续学习如何在实战中使用SAP Kyma. Jerry在之前的文章里,分别介绍了如何本地搭建WordPress实例: 什么?在SAP中国研究院里还需要会PHP开发? 以及如何把这个本地搭建的Wo ...

  6. impala 中SQL的优化方法

    1.取流水表的数据时,如果是使用全部分区数据,不能从SA层数据取数,需要改从SH层取数,因为SH层为parquet存储,查询性能较好. 2.对于脚本中使用的临时表,如果存在以下情况需要进行统计表信息  ...

  7. LVS、nginx、Haproxy对比（详细）

    目录 代理软件 负载均衡产品介绍 haproxy 本文档参考 http://www.ha97.com/5646.html 代理软件 负载均衡产品介绍 市面上的负载均衡产品主要分为两种:硬件产品和软件产 ...

  8. HugePages概述--翻译自19C文档

    翻译自: https://docs.oracle.com/en/database/oracle/oracle-database/19/unxar/administering-oracle-databa ...

  9. c# 运算符和表达式

  10. 关于在window8上使用ssh命令的记录

    1.开启虚拟机以及git bash窗口,准备连接 2.在虚拟机中输入ifconfig -a查看虚拟机ip 从图中找到ip为 : inet 地址:192.168.78.133 3.输入命令: ssh r ...