用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 相关文章推荐
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 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中使用break跳出多重循环代码实例
2015/01/21 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
深入理解javascript中的this
2021/02/08 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python使用PyQt5的简单方法
2019/02/27 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
幼儿教师自我鉴定
2013/11/02 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2015年除四害工作总结
2015/07/23 职场文书