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

　   可用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. 第05组 Beta版本演示

    第05组 Beta版本演示 小组信息 组名:天码行空 组长博客:地址 组内成员: 组员 学号 卢欢(组长) 031702513 陈天恒 031702527 古力亚尔·艾山 031702511 张聪 0 ...

  2. Java基础（六）

    Spring依赖注入的几种方式 1.接口注入 2.setter方法注入 3.构造方法注入 Struts2的拦截器与过滤器的工作原理 1.Structs2拦截器是在访问某个Action或Action的某 ...

  3. 一、I/O模型之BIO

    I/O模型之BIO 基本介绍 Java BIO 就是传统的 Java IO 编程,其相关的类和接口再 java.io 包下 BIO(blocking I/O):同步阻塞,服务器实现模式为一个连接一个线 ...

  4. shadertoy使用教程

    shadertoy使用教程 /** *常量定义 */ uniform vec3 iResolution; // 窗口分辨率,单位像素 uniform float iTime; // 程序运行的时间,单 ...

  5. 织女星开发板RISC-V内核实现微秒级精确延时

    前言 收到VEGA织女星开发板也有一段时间了,好久没玩了,想驱动个OLED屏,但是首先要实现IIC协议,而实现IIC协议,最基本的就是需要一个精确的延时函数,所以研究了一下如何来写一个精确的延时函数. ...

  6. 【Java基础】正则表达式

    目录 正则表达式 什么正则表达式 普通字符 预定义字符 特殊字符 数量限定字符 定位字符 选择符和分组 反向引用 预搜索 运算符的优先级 常用正则 附录 正则表达式 本文的大部分内容转载自正则表达式从 ...

  7. Java面试必备：手写单例模式

    面试官:请手写下几种常见的单例模式 我:好的(面带微笑),心里暗喜(送分题). 没成想提笔便写出了如此豪放的代码,不堪回首,请原谅我的不羁! 此篇整理了几种常见的单例模式代码示例,再有面试官让手撕单例 ...

  8. ubuntu18.04 安装 搜狗输入法

    一.安装fcitx sudo apt-get install fcitx-bin 因为搜狗拼音依赖fcitx,相关的依赖库和框架都会自动安装上. sudo apt-get install fcitx- ...

  9. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

  10. Response to 16岁的篮球投手

    关于篮球,我想写的很多,被偏爱的运动,被赞美的运动,带着青春的万丈光泽. 我们对易建联的苛刻是因为想当然,对大侄子的溺爱是因为急功近利.过于娱乐化和商业化,让一项竞技体育变得像是豆瓣八组的吃瓜盛宴. ...