用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)


Posted in Javascript onJune 22, 2012

Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。

Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

页面加载时只执行onload
页面关闭时先执行onbeforeunload,最后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。

1、onbeforeunload事件:

说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。

用法:

 ·object.onbeforeunload = handler

 ·<element onbeforeunload = “handler” … ></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="http://www.w3.org/1999/xhtml"> 

 <head> 

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

 <title>onbeforeunload测试</title> 

 <script> 

 function checkLeave(){ 


event.returnValue="确定离开当前页面吗?"; 

 } 

 </script> 

 </head> 

 <body onbeforeunload="checkLeave()"> 

 </body> 

 </html>

2、onunload事件

用法:

 ·object.onbeforeunload = handler

 ·<element onbeforeunload = "handler"></element>

描述:

 当用户关闭一个页面时触发 onunload 事件。

触发于:

 ·关闭浏览器窗口

 ·通过地址栏或收藏夹前往其他页面的时候

 ·点击返回,前进,刷新,主页其中一个的时候

 ·点击 一个前往其他页面的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="http://www.w3.org/1999/xhtml"> 

 <head> 

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

 <title>onunload测试</title> 

 <script> 

 function checkLeave(){ 


alert("欢迎下次再来!"); 

 } 

 </script> 

 </head> 

 <body onunload="checkLeave()"> 

 </body> 

 </html>

一个判断页面是否真的关闭和刷新的好方法:
window.onbeforeunload=function (){ 
alert("===onbeforeunload==="); 
if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){ 
alert("你关闭了浏览器"); 
}else{ 
alert("你正在刷新页面"); 
} 
}

这段代码就是判断触发onbeforeunload事件时,鼠标是否点击了关闭按钮,或者按了ALT+F4来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。
Javascript 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue 全局环境切换问题
Oct 27 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 #Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 #Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 #Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 #Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 #Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 #Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP基础知识介绍
2013/09/17 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python基本语法经典教程
2016/03/11 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python中@contextmanager实例用法
2021/02/07 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
幼儿园中班新学期寄语
2014/01/18 职场文书
图书室管理制度
2014/01/19 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
消防先进事迹材料
2014/02/10 职场文书
防火标语大全
2014/10/06 职场文书
Python图像处理库PIL详细使用说明
2022/04/06 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server