用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入门基础 document.write输出
Feb 22 Javascript
Javascript 实用小技巧
Apr 07 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
Vue.js实现立体计算器
Feb 22 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版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
js中document.write的那点事
2014/12/12 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
jQuery实现的form转json经典示例
2017/10/10 jQuery
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
python将unicode转为str的方法
2017/06/21 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
基于Python List的赋值方法
2018/06/23 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
班队活动设计方案
2014/01/30 职场文书
行政副总岗位职责
2014/02/23 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
新闻编辑求职信
2014/07/13 职场文书
丧事答谢词
2015/01/05 职场文书
罚站检讨书
2015/01/29 职场文书
国家助学金受助感言
2015/08/01 职场文书
礼貌问候语大全
2015/11/10 职场文书