用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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP面向对象法则
2012/02/23 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
DOM 基本方法
2009/07/18 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python subprocess模块学习总结
2014/03/13 Python
windows下python安装pip图文教程
2018/05/25 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python urllib2运行过程原理解析
2020/06/04 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
Python类class参数self原理解析
2020/11/19 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
银行出纳岗位职责
2013/11/25 职场文书
员工工作表扬信范文
2014/01/13 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
借名购房协议书范本
2014/10/06 职场文书