onunload,onbeforeunload,load事件
1. Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行 ,它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取 ;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用 。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。
1、onbeforeunload事件:
说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法:
·object.onbeforeunload = handler
·<element … ></element>
描述:
事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
触发于:
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回,前进,刷新,主页其中一个的时候
·点击 一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
可以用在以下元素:
·BODY, FRAMESET, window
平台支持:
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
示例:
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onbeforeunload测试</title>
<script>
function checkLeave(){
event.returnValue="确定离开当前页面吗?";
}
</script>
</head>
<body >
</body>
</html>
2、onunload事件
用法:
·object.onbeforeunload = handler
·<element ></element>
触发于:
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回,前进,刷新,主页其中一个的时候
·点击 一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
示例:
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onunload测试</title>
<script>
function checkLeave(){
alert("欢迎下次再来!");
}
</script>
</head>
<body >
</body>
</html>
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onunload测试</title>
<script>
function checkLeave(){
alert("欢迎下次再来!");
}
</script>
</head>
<body >
</body>
</html>
本文出自 51CTO.COM技术博客
2.onunload,onbeforeunload,onload 三者执行顺序:
关闭页面时:onbeforeunload->onunload
刷新页面时:onbeforeunload->onunload->onload
载入页面时:onload
3.onbeforeunload能弹出对话框确定是否关闭页面,面onunload能弹出对话框,但不能阻止页面的关闭.
onbeforeunload弹出确定对话框:οnbefοreunlοad="return '你确定要关闭'" 或者 οnbefοreunlοad="event.returnValue='你确定要关闭'" 当return 后面没值的时候(不是为空),不弹出对话框,return后面的字符会加在浏览器弹出的一个对话框中,所以没必要用confirm,否则会造成弹出两个对话框
3.判断是刷新还是关闭
一个判断页面是否真的关闭和刷新的好方法:
window.οnbefοreunlοad=function (){
alert("===οnbefοreunlοad===");
if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){
alert("你关闭了浏览器");
}else{
alert("你正在刷新页面");
}
}
这段代码就是判断触发onbeforeunload事件时,鼠标是否点击了关闭按钮,或者按了ALT+F4来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。
onunload,onbeforeunload,load事件相关推荐
- 用户关闭页面前提示,提醒保存内容 Window 的 unload onunload onbeforeunload 事件
用户关闭页面前提示,提醒保存内容 Window 的 unload onunload onbeforeunload 事件 在线测试例子: http://kylebing.cn/test/unload-e ...
- 关于ie中easyui form组件load事件无法多次加载数据
1.废话不多说,既然找到这了就是要解决问题的: 在easyui中form load事件是这样用的的 load data 加载记录来填充表单. data 参数可以是一个字符串或者对象类型,字符串作为一个 ...
- jQuery中ready与load事件的区别
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. jQuery中ready与load事件的区别 概述: 大家在工作中用jQuery的时候一定会在使用之 ...
- jquery load 事件用法
jquery load 事件用法 如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像.如果绑定在元素上,则当元素的内容加载完毕后触发. 注意:只有当在这个元素完全加载完之 ...
- jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
- jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery应用步骤以及ready事件和load事件的区别 一.jQuery应用步骤 第一步:利用script标签的src属性引入jQuery文档 第二步:创建一个script标签,在该script下 ...
- jQuery函数$(window).load事件
绑定jQuery函数到$(window).load事件 大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready ...
- C#开发WindowsForm程序Load事件未注册
使用Visual Studio新建WindowsForm程序之后,默认没有Load事件,如下图所示: 那么,如果需要添加Load事件怎么办呢? Form设计页面内空白处双击.这是最简单便捷的方法.在[ ...
- JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二(二)...
作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
最新文章
- Udacity机器人软件工程师课程笔记(二十七) - 卷积神经网络(CNN)
- 刚申请了Blog,首贴庆祝!
- IntelliJ IDEA 2020.3 重大特性
- NumPy之array
- C#Dictionary源码
- ThinkPHP5验证码不显示的原因及解决方法
- freebsd 下安装桌面
- Microsoft SQL Azure论文笔记
- Imbalanced data – Finding Waldo
- java8hashmap_Java 8中的HashMap性能改进
- 全境封锁服务器维护 2018,全境封锁全域事件2018年8月活动什么时候开始_全域事件怎么玩...
- c语言for循环可以初始化多个变量么_C8循环
- [每天一个知识点]27-职业生涯-饿了不能吃石头所以吃沙子
- Android 使用Fragment,ViewPagerIndicator 制作csdn app主要框架
- Java中Math类常用方法
- 快速利用第三方平台SDK,实现点对点语音通话
- MobileNetV2: Inverted Residuals and Linear Bottlenecks论文解读
- iPhone 14 电池耗电怎么样?iPhone 14和13比对那个续航好?
- 【软件测试】公司招个测试员,我又面试了100多人,结局......
- 进程(父进程、子进程、init进程)
热门文章
- html flash地址,PHP如何实现将视频html地址转换成flash swf地址
- 毕设分享SSM 网上购物商城系统(含源码+论文)
- 大数据风控AI竞赛总结
- 单元格等于计算机日期,Excel相邻单元格快速填入相同日期的几种方法
- 计算机动画制作有什么软件,电脑绘画和动画制作,要用什么软件?
- acrobat linux 下载地址,如何安装从Adobe网站下载的Adobe Acrobat Reader deb软件包?
- php 格式化电话号码
- 【深度学习】BERT变体—BERT-wwm
- hexo latex 换行 多行公式 终极解决方案
- 【案例实战】不会慢 SQL优化?收藏一下这个例子