用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 实现图片轮换
Jan 28 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
在vue中阻止浏览器后退的实例
Nov 06 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中smarty模板条件判断用法实例
2015/06/11 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
单链表反转python实现代码示例
2018/02/08 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
春节晚会主持词
2014/03/24 职场文书
员工辞退通知书
2015/04/17 职场文书
高考1977观后感
2015/06/04 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书