用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 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
Postman内建变量常用方法实例解析
Jul 28 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
6个超实用的PHP代码片段
2015/08/10 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
vue3.0 上手体验
2020/09/21 Javascript
浅析python协程相关概念
2018/01/20 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python 用struct模块解决黏包问题
2020/11/07 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
求职者应聘的自我评价
2013/10/16 职场文书
学生实习推荐信范文
2013/11/26 职场文书
给校长的建议书600字
2014/05/15 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
检讨书怎么写
2015/05/07 职场文书
消费者理赔投诉书
2015/07/02 职场文书