用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功能函数(2009-06-04更新)
Jun 04 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
常用jQuery代码分享
Jul 14 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 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抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
建房协议书
2014/04/11 职场文书
幼师求职自荐信
2014/05/31 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2014年收银工作总结
2014/11/13 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书