如果现有一需求：浏览器页面关闭时弹出一个对话框，询问是否要退出，应该怎么做呢？

　   可用onunload事件来实现，该事件会在刷新和关闭页面时执行

　　

　　我用如下3种方法绑定该事件，但所有主流浏览器都无法在关闭页面时执行该事件

<body onunload="alert('确定离开吗？')">
<script>

      window.onunload = function() {

            alert("确定离开吗？");

      }

</script>
<body onunload="hello()">

        <div>欢迎学习JavaScript</div>

        <script>

            function hello() {

                alert("确定离开吗？");

            }

        </script>

 </body>

　　 后来调试发现，onunload事件已正常执行，但onunload是在销毁页面对象后触发的 ，此时alert方法已经被锁定销毁，所以不能弹出提示框

　　 

　　 参考：https://segmentfault.com/q/1010000014717573

　　 那是不是就无法实现该需求了呢？其实官方提供了另一个方法 onbeforeunload

       该方法能让我们点击关闭页面时，在页面即将关闭之前执行相应的操作

　　Demo

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title> 卸载事件 </title>

    </head>

    <body>

        <div>欢迎学习JavaScript</div>

        <script>

            window.onbeforeunload = function(e) {

                e = e || window.event;

                // 兼容IE8和Firefox 4之前的版本

                if(e) {

                    e.returnValue = '确定要关闭该页面吗？';

                }

                return '确定要关闭该页面吗？';

            };

        </script>

    </body>

</html>

　　注：① 经测试，IE，edge,safari刷新和关闭页面都会弹出相应提示；

　　　　② 火狐，谷歌，360极速刷新能弹出，关闭页面时无法弹出，并且弹出框不是我们自定义的内容

　　附：补充2个可能你会问到的问题，而这2个问题官方已经给出了答案

　　　　 问题一：为什么有些浏览器无法弹出提示框

　　　　

　　　　   问题二：为什么有些浏览器在关闭页面时弹出的提示框内容不是我们自定义的

　　　　

onunload事件不触发的探索的更多相关文章

  1. onunload事件和onbeforeunload事件

    记录知识点背景:在做一个h5项目时,在统计事件时有这样一个需求, 希望能统计到用户是从第几页离开的,用到了这个知识点.在此记录. window.onunload 1.定义和用法 onunload事件在 ...

  2. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

  3. JS事件 卸载事件 当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。注意：不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

  4. 【原】js离开页面执行函数 onbeforeunload与onunload事件

    在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunlo ...

  5. onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发. onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本. onload 和 onunl ...

  6. onbeforeunload与onunload事件

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...

  7. 彻底解决低端安卓手机touchend事件不触发（考虑scroll）

    本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求. 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默 ...

  8. Win7/Win8/Win8.1/Win10下的DragEnter DragDrop事件不触发

    Win7/Win8/Win8.1/Win10下的DragDrop事件不触发 2011-02-02  来自:博客园  字体大小:[大 中 小] 摘要:你的应用程序需要从windows资源管理器拖动文件到 ...

  9. 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

随机推荐

  1. subprocess 的 Popen用法

    使用Popen方法时,需要获取输出内容时可以按如下方法获取: # -*- coding:utf-8 -*- import subprocess cmd = r"ping www.baidu. ...

  2. nginx（4）

    目录 一.安装配置 1.安装 2.配置文件 3.测试和启动 二.功能 1.虚拟主机 1.1 基于IP 1.2 基于域名 1.3 基于端口 2.访问控制 3.用户认证 4.文件共享 5.文件别名 6.状 ...

  3. Ubuntu16.04VIM无法补全错误记录

    先记录一下YouCompleteMe的安装过程. 按照教程进行安装 1. 安装 vundle # vundle是vim的包管理器,十分好用 cv@cv: ~$ git clone https://gi ...

  4. VS出现未加载wntdll.pdb的解决办法

    无缘无故出现了未加载wntdll.pdb的的错误,不知道原因是什么,但找到了解决方法.在调试中选择选项,然后选择调试->符号,勾选Microsoft符号服务器,确定.重新生成项目时会有各种加载, ...

  5. [问题排查]通过调度系统远程执行脚本，报mysql command not found异常

    今天在公司使用LS调度系统(百度内部的工具),执行远程脚本的时候,每次都失败. 脚本内容比较简单,其实就是将HDFS(AFS)中的数据插入到Palo(Doris)数据库中,脚本如下: mysql -h ...

  6. 【LeetCode】11. 盛最多水的容器

    题目 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两 ...

  7. 转战物联网·基础篇06-深入理解MQTT协议之基本术语

      通过上一节我们对MQTT协议已经有了初步的印象,这一节我们开始深入的理解一下MQTT协议,介绍常用的MQTT 3.1.1版本,5.0版本后面指介绍新增部分即可.这一节我们先介绍MQTT里常用的术语 ...

  8. Azure 架构师认证考试

    Azure认证路线 AZ-300 AZ-301 https://blog.csdn.net/pg_edb/article/details/86794505 免费题 https://iteablue.c ...

  9. oracle数据库自动生成数据库表结构文档(亲测有效)

    import java.awt.Color; import java.io.FileOutputStream; import java.sql.Connection; import java.sql. ...

  10. 008.MongoDB分片群集概念及原理

    一 MongoDB分片介绍 1.1 分片 Mongodb另一种集群,就是分片技术,可以满足MongoDB数据量大量增长的需求. 当MongoDB存储海量的数据时,一台机器可能不足以存储数据,也可能不足 ...