onunload事件不触发的探索
如果现有一需求：浏览器页面关闭时弹出一个对话框，询问是否要退出，应该怎么做呢？
可用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事件不触发的探索的更多相关文章
- onunload事件和onbeforeunload事件
记录知识点背景:在做一个h5项目时,在统计事件时有这样一个需求, 希望能统计到用户是从第几页离开的,用到了这个知识点.在此记录. window.onunload 1.定义和用法 onunload事件在 ...
- 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）
标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...
- JS事件 卸载事件 当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。注意：不同浏览器对onunload事件支持不同。
卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...
- 【原】js离开页面执行函数 onbeforeunload与onunload事件
在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunlo ...
- onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发. onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本. onload 和 onunl ...
- onbeforeunload与onunload事件
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...
- 彻底解决低端安卓手机touchend事件不触发（考虑scroll）
本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求. 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默 ...
- Win7/Win8/Win8.1/Win10下的DragEnter DragDrop事件不触发
Win7/Win8/Win8.1/Win10下的DragDrop事件不触发 2011-02-02 来自:博客园 字体大小:[大 中 小] 摘要:你的应用程序需要从windows资源管理器拖动文件到 ...
- 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
随机推荐
- C语言 复习函数
什么是函数呢? 首先函数是在完成特定任务的程序代码中,拥有自己独立的单元. 举个例子 “你可以拿本书吗?” ”你可以拿本语文书吗?“ “你可以拿苹果吗?”..... 如果要是放到程序里面估计要重复很多 ...
- 学习java需要英语很好吗？
学习java需要英语很好吗? 编程语言起源于美国,是由英文构成的,其中包括几十个英文的关键字以及几百个英文的函数,除非需要对文本进行处理,否则一般不会出现中文.但是,它们都是孤立的单词,不构成任何语句 ...
- asp开发类型判段
Asp的东西有许多,asp的类型便是其中之一,如同Asp的数据类型只需一个那便是"variant ". 它是一种特别的数据类型可以依据它的运用标明许多不同品种的信息(cnhfjj) ...
- 一个适合于.NET Core的超轻量级工作流引擎：Workflow-Core
一.关于Workflow-Core 近期工作上有一个工作流的开发需求,自己基于面向对象和职责链模式捣鼓了一套小框架,后来在github上发现一个轻量级的工作流引擎轮子:Workflow-Core,看完 ...
- 阿里钉钉技术分享：企业级IM王者——钉钉在后端架构上的过人之处
本文引用了唐小智发表于InfoQ公众号上的“钉钉企业级IM存储架构创新之道”一文的部分内容,收录时有改动,感谢原作者的无私分享. 1.引言 业界的 IM 产品在功能上同质化较高,而企业级的 IM 产品 ...
- IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法
指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...
- docker 部署springcloud项目
一.首先从 docker.hub[地址:https://hub.docker.com] 中根据各自的需求 pull 对应的 openjdk镜像(本次直接在修改后的docker镜像源中下载) docke ...
- FLV提取AAC音频单独播放并实现可视化的频谱
如上图,要实现对FLV直播流中音频的识别,并展示成一个音频相关的动态频谱. 一. 首先了解下什么是声音? 能量波,有频率有振幅,频率高低就是音调,振幅大小就是音量:采样率是对频率采样,采样精度是对幅度 ...
- （五十七）c#Winform自定义控件-传送带（工业）-HZHControls
官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...
- SpringCloud（一）：了解SpringCloud
一.SpringCloud 简介 首先看看SpringCloud官方的介绍: Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由, ...