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

下面直接上代码：

<!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. 配置闪回恢复区开启归档，未配置清理归档脚本，数据库hang住

    问题现象,测试环境执行SQL hang住 enmo:/home/oracle/worksh dg.sh SQL*Plus: Release Production on Mon May :: Copyr ...

  2. MyBatis 源码篇-MyBatis-Spring 剖析

    本章通过分析 mybatis-spring-x.x.x.jar Jar 包中的源码,了解 MyBatis 是如何与 Spring 进行集成的. Spring 配置文件 MyBatis 与 Spring ...

  3. eclipse智能提示报错(to avoid the message, disable the...)

    然后这里可能会再报别的错误  我的做法是   再重新将 code recommenders 打开 ********************************** 为什么会出现 这样错误呢 ? 简 ...

  4. Java Web 深入分析（5） Java ClassLoader 工作机制

    Classloader 有3个作用 将class加载到JVM中去 审查每个类由谁去加载,是一种父优先的等级加载 把Class字节码统一编译成JVM统一要求的对象格式 ClassLoader的等级加载机 ...

  5. 关于NSOperationQueue，一个容易让初学者误解的问题

    凡是学习NSOperationQueue的人,都会遇到setMaxConcurrentOperationCount这个函数.在网上的许多博文中,都将setMaxConcurrentOperationC ...

  6. 批量删除redis

    批量删除"aso_"开头的key:redis-cli keys aso_* | xargs redis-cli del

  7. [Mac][Python][Virtualenv]安装配置和使用

    安装帮助文档安装VirtualEnv报错如下 tekiMacBook-Air:workspaces hbai$ source /usr/local/bin/virtualenvwrapper.sh / ...

  8. 【Flask+Redis】 python学习第一章 - 7.0 断言 数据库测试 redis学习

    assert 断言 def div(num1, num2): # 断言 assert isinstance(num1, int), "值类型错误" assert isinstanc ...

  9. jade继承

    代码的复用是jade非常突出的一个设计目标,jade不仅仅通过mixin来复用代码,他在文件的组织能力上也非常突出,说白了,就是继承和包涵   block定义的方式和调用的方式 block desc ...

  10. Window脚本学习笔记之BAT简介

    本篇文章不是直接讲技术,而是对我自己学习这些年来的一番感触和简单的介绍,其间也穿插着一些基本的知识,若是学习技术者可跳过,亦不妨碍学习其他. BAT简介 BAT是Windows的批处理脚本,即以后缀“ ...