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

下面直接上代码：

<!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. [Vue]Vue keep-alive

    keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 ...

  2. 数据库中间件之mycat安装部署（一）

    在学习数据库中间件前,我们先抛出三个问题 1.数据库数据量不大,但并发读写操作很大,应该怎么办? 此时我们首先考虑使用缓存中间件来减轻读压力,如果不能满足则考虑数据库读写分离,此时就会引入新的问题,这 ...

  3. 转录组测序（RNA-seq）技术

        转录组是某个物种或者特定细胞类型产生的所有转录本的集合.转录组研究能够从整体水 平研究基因功能以及基因结构,揭示特定生物学过程以及疾病发生过程中的分子机理,已广泛应 用于基础研究.临床诊断和药 ...

  4. 动手实现CNN卷积神经网络

    数据集采用的是手写数据集(http://yann.lecun.com/exdb/mnist/): 本文构建的CNN网络图如下: 像素点:28*28 = 784,55000张手写数字图片. # -*- ...

  5. puml 用于代码注释

    notebook 笔记本 @startuml rectangle sql_decode.py{ object SQLDataset object Name SQLDataset : meta = &q ...

  6. css布局笔记

    1.display   block块级元素(div.p等) inline 行内元素(a.span等) 常见的例子:把li修改成inline ,制作成水平菜单 2.max-width 来适应不同浏览器窗 ...

  7. javascript--HTML DOM常用元素对象

    二,Select:访问select元素 属性:.selectedIndex  获取select中当前选中项的下标 .options  获取select中所有的option元素 返回值为数组 .opti ...

  8. nuxt中全局引入element-ui

    介绍 对于一个前端小白来说,使用一套已有的框架作为基础,可以达到事半功倍的效果,在这里我们选择Element.Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库( ...

  9. IDAPython实战项目——DES算法识别

    在CTF的逆向中我们需要的是找到加密的主函数,结合了yara的识别原理,通过对常量数组的引用的查找,一步步递归构建调用树.调用树根部就是可能的密码算法主函数. 由于这种办法需要常量分布于算法的各个步骤 ...

  10. Linux中找回误删除的文件

    Linux中找回误删除的文件 作为一个多用户.多任务的Linux操作系统,会出现在没有备份的情况下将一些用户文件误删的情况,Linux下的文件一旦被删除,是难以恢复的.尽管删除命令只是在文件节点中作删 ...