用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中有趣的反柯里化深入分析
Dec 05 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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实现批量查询清除一句话后门的代码
2008/01/20 PHP
php的大小写敏感问题整理
2011/12/29 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php常用正则函数实例小结
2016/12/29 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python向excel中写入数据的方法
2019/05/05 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
python实发邮件实例详解
2019/11/11 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python如何写try语句
2020/07/14 Python
露营世界:Camping World
2017/02/02 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
.NET程序员的数据库面试题
2012/10/10 面试题
港湾网络笔试题
2014/04/19 面试题
好的演讲稿开场白
2013/12/30 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
表扬稿格式范文
2015/01/16 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android