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

下面直接上代码：

<!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. （十三）JSON的使用（下）

    (接上一章节) 4.2 使用ajax交互方式 使用ajax的转换思想        A:异步请求在页面中发起,也要在页面中接收数据并展现. B:ajax中的数据不能从作用域中获取,只能从respons ...

  2. Html5+Mui前端框架,开发记录（一）

    1.下载HBuilder X,地址:http://www.dcloud.io/hbuilderx.html,根据需求选择版本下载. Mui文档,地址:http://dev.dcloud.net.cn/ ...

  3. C#强制回收垃圾

    [DllImport("psapi.dll")] private static extern int EmptyWorkingSet(int hProcess); public v ...

  4. Tomcat server.xml port server context 配置

  5. opencv-01--图像的遍历

    遍历图像的4种方式 一.at<typename>(i,j) Mat类提供了一个at的方法用于取得图像上的点,它是一个模板函数,可以取到任何类型的图像上的点.下面我们通过一个图像处理中的实际 ...

  6. Linux 命令集锦

    linux 一切从根开始,一切皆文件~ 让我们从一些命令开始了解吧 基本命令 man  command:manual:查看命令帮助手册 ls:list:查看当前文件夹下的内容 -a 查看所有内容,包含 ...

  7. sql语句分页多种方式

    sql语句分页多种方式ROW_NUMBER()OVER sql语句分页多种方式ROW_NUMBER()OVER 2009年12月04日 星期五 14:36 方式一 select top @pageSi ...

  8. 0.a开始数据结构征程

    决定开始从mooc和ppt上学习数据结构,......书暂时不看.在进入数据结构之前,我首先将自己以一个还未进入大山但又向往山中美景的探险者身份对数据结构的几点疑问的答案的寻找和思考写在下面. 什么是 ...

  9. Jmeter5.1——聚合报告参数分析

    Jmeter5.1——聚合报告参数分析 Label: 每个JMeter的element的Name值.例如HTTP Request的Name. Samples:发出请求的数量.如果线程组中配置的是线程数 ...

  10. 编译 recastnavigation

      1. https://github.com/memononen/recastnavigation 下载zip并解压 2. 打开https://www.libsdl.org/download-2.0 ...