JS之onunload、onbeforeunload事件详解
简介
onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行,它还可 以阻止onunload的执行。
onbeforeunload 是正要去服务器读 取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。
onunload事件
onunload 事件在用户退出页面时发生。
onunload 发生于当用户离开页面时发生的事件(通过点击一个连接,提交表单,关闭浏览器窗口等等。)
注意: onunload 事件同样触发了页面载入事件(+ onload 事件)。
语法
直接使用在html中:
<body onload="SomeJavaScriptCode">
注:以下 HTML 标签支持 onunload :
<body>
,<frameset>
JavaScript 中:
window.onunload=function(){SomeJavaScriptCode};
例子:
//JS document
window.onunload = function(){
alert("unload is work");
}
浏览器兼容情况
- IE浏览器 页面跳转、刷新页面能执行,但关闭浏览器不能执行;
- firefox 页面跳转能执行,但刷新页面、关闭浏览器不能执行;
- Safari 刷新页面、页面跳转,关闭浏览器都会执行;
- Opera、Chrome任何情况都不执行。
如图所示:
大体一句话描述:IE, Firefox, 和 Safari 支持 onunload 事件, 但是 Chrome 或者 Opera 不支持该事件。
onbeforeunload事件
onbeforeunload
事件在即将离开当前页面(刷新或关闭)时触发。
该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。
但你可以自定义一些消息提示与标准信息一起显示在对话框。
注意: 如果你没有在 <body>
元素上指定 onbeforeunload
事件,则需要在 window
对象上添加事件,并使用 returnValue
属性创建自定义信息(查看以下语法实例)。
语法
html中使用:
<element onbeforeunload="myScript">
JavaScript 中:
object.onbeforeunload=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("beforeunload", myScript);
注意: Internet Explorer 8 及更早 IE 版本不支持
addEventListener()
方法。
JS中使用例子写法一:
//JS document
window.onbeforeunload = function(){
return "onbeforeunload is work";
}
return
的值 为你需要告诉用户的提示信息如上面demo的话浏览器的提示是这样(firefox ,Chrome并不支持文字提醒)
。
JS中使用例子写法二:
window.onbeforeunload = function(event) {
event.returnValue = "我在这写点东西...";
};
值得注意的是,网上流传说 可以通过检查 e.clientX e.clientY 判断 用户是否点击 右上角关闭浏览器的,但是实践发现 只有 IE6,IE7,IE8 能获取得到具体数值,其他浏览器均为 undefined。
浏览器兼容情况
- IE、Safari 完美支持
- Firefox、Chrome 不支持文字提醒信息
- Opera 不支持
如图所示:
IE6,IE7 使用 onbeforeunload 遇到的bug
凡是 <a> 标签 都会触发 onbeforeunload事件 包括 href=”javascript:void(0)” 这种。
在IE6,IE7 下面 点击 里面的 a 标签,蛋疼的事情就发生了。
解决方法:给这 a标签的 父级 添加 onclick=function(){return false} 即可,不过添加了这个之后 要确保 父级里面没有 input type=”checkbox” 的标签,否则会导致其无效不可点击。
JS之onunload、onbeforeunload事件详解的更多相关文章
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- 160503、onunload、onbeforeunload事件详解
最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...
- onunload、onbeforeunload事件详解--zhuan
最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...
- js keyup、keypress和keydown事件 详解
js keyup.keypress和keydown事件 详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...
- 第三天:JS事件详解-事件流
学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容: 1)基础概念 2)举例说明: 代码如上,如果用事件 ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
随机推荐
- Android之Activity系列总结(二)--任务和返回栈
任务和返回栈 应用通常包含多个 Activity.每个 Activity 均应围绕用户可以执行的特定操作设计,并且能够启动其他 Activity. 例如,电子邮件应用可能有一个 Activity 显示 ...
- HotSpot 的垃圾收集器
上图展示了7种作用于不同分代的收集器,如果两个收集器之间存在连线,就说明它们可以搭配使用,收集器所处的区域,则表示它是属于新生代还是老年代收集器. 并行(Parallel):指多条垃圾收集器线程并行工 ...
- 深入分析Java I/O的工作机制 (一)
此篇博客看至许令波的深入分析javaWeb内幕书籍, 此篇博客写的是自己看完之后理解的重点内容,加一些理解,希望对你有帮助. 1.Java的I/O类库的基本架构 先说一下什么是类库:可以说是类的集合, ...
- HTML_CSS笔记
常用标记 水平标记:<hr/> 换行标记:<br/> 段落标记:<p></p> 标题标记:<h1></h1>~~<h6&g ...
- JWT(Json web token)简介
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(S ...
- Ajax 提交 数据含特殊字符 出现500错误
Ajax 请求API接口 传输过去的数据 含有特殊字符,Ajax请求失败出现500错误. 假设你要post过去的数据为 :data ==>> {a:'!@!@!@!@#$#{}|> ...
- Java 基础:hashCode方法
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 一.前言 泥瓦匠最近被项目搞的天昏地暗.发现有些要给自己一些目标,关于技术的目标: 专注很重要.专注J ...
- DWR第二篇之逆向Ajax
1. 本示例在第一篇架构基础上添加代码 2. 首先修改web.xml里dwr的servlet配置: <!-- 配置dwr请求的servlet --> <servlet> < ...
- 视频人脸检测——Dlib版(六)
往期目录 视频人脸检测--Dlib版(六) OpenCV添加中文(五) 图片人脸检测--Dlib版(四) 视频人脸检测--OpenCV版(三) 图片人脸检测--OpenCV版(二) OpenCV环境搭 ...
- 使用Python进行并发编程
让计算机程序并发的运行是一个经常被讨论的话题,今天我想讨论一下Python下的各种并发方式. 并发方式 线程(Thread) 多线程几乎是每一个程序猿在使用每一种语言时都会首先想到用于解决并发的工具( ...