用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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JS出现失效的情况总结
Jan 20 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
django rest framework 自定义返回方式
2020/07/12 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
is_file和file_exists效率比较
2021/03/14 PHP
后勤自我鉴定
2013/10/13 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
员工工作能力评语
2014/12/31 职场文书
子女赡养老人协议书
2016/03/23 职场文书