用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 相关文章推荐
jQuery 使用手册(五)
Sep 23 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
浅谈React和Redux的连接react-redux
Dec 04 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
写一个Vue Popup组件
Feb 25 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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
Smarty模板快速入门
2007/01/04 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
面试后感谢信怎么写
2014/02/01 职场文书
低碳生活倡议书
2014/04/14 职场文书
运动员口号
2014/06/09 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
MySQL中order by的执行过程
2022/06/05 MySQL