用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动态加载js文件的方法
Dec 24 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
基本DOM节点操作
Jan 17 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
Angular网络请求的封装方法
May 22 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
oracle资料库函式库
2006/10/09 PHP
php数组去重复数据示例
2014/02/25 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
js同时按下两个方向键
2007/12/01 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
详解django中自定义标签和过滤器
2017/07/03 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python实现一个猜拳游戏
2020/04/05 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
《记承天寺夜游》教学反思
2014/02/16 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2014年应急工作总结
2014/12/11 职场文书
纪委立案决定书
2015/06/24 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
Python借助with语句实现代码段只执行有限次
2022/03/23 Python