捕获浏览器关闭、刷新事件不同情况下的处理方法


Posted in Javascript onJune 02, 2013

在做一些关于会员在线的问题时,往往我们要根据览器是否关闭来判断用户是否下线,然后再从session和application中将此用户移除。

由于浏览器是无状态的,在这时候捕捉浏览器关闭会出现两种情况:
1.真正的关闭浏览器 (a.点击关闭按钮 b.右击任务栏关闭 c.按alt+F4关闭)
2.刷新浏览器。

那如何判断区分这两种动作呢?

一. Javascript代码处理方法:

function window.onbeforeunload() 
{ 
//用户点击浏览器右上角关闭按钮或是按alt+F4关闭 
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) 
{ 
// alert("点关闭按钮"); 
document.getElementById("hiddenForm:hiddenBtn").click(); 
// window.event.returnValue="确定要退出本页吗?"; 
} 
//用户点击任务栏,右键关闭。s或是按alt+F4关闭 
else if(event.clientY > document.body.clientHeight || event.altKey) 
{ 
// alert("任务栏右击关闭"); 
document.getElementById("hiddenForm:hiddenBtn").click(); 
// window.event.returnValue="确定要退出本页吗?"; 
} 
//其他情况为刷新 
else 
{ 
// alert("刷新页面"); 
} 
}

其中 event.clientX 鼠标光标X坐标
document.body.clientWidth 窗体工作区宽度
event.clientY 鼠标光标Y坐标
event.altKey 是否按下alt键
二. 事件捕捉方法:
<body scroll="no" onbeforeunload="return CloseEvent();" onunload="UnLoadEvent()" > 
</body> 
<script language="JavaScript" type="text/javascript"> 
var DispClose = true; 
function CloseEvent() 
{ 
if (DispClose) 
{ 
return "是否离开当前页面?"; 
} 
} 
function UnLoadEvent() 
{ 
DispClose = false; 
//在这里处理关闭页面前的动作 
} 
</script>

在页面卸载之前引发onbeforeunload事件,如果用户选择“是”即确定卸载页面将引发onunload事件,否则返回页面不做任何操作。
Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
ie focus bug 解决方法
Sep 03 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
vue前后分离调起微信支付
Jul 29 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
原生js实现无缝轮播图效果
Jan 28 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 #Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 #Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 #Javascript
js内存泄露的几种情况详细探讨
May 31 #Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 #Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
html5时钟实现代码
2010/10/22 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
模具专业推荐信
2013/10/30 职场文书
大学生学业生涯规划
2014/01/05 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
市场营销工作计划书
2014/09/15 职场文书
财政局个人总结
2015/03/04 职场文书
培训通知书模板
2015/04/17 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
工作态度检讨书范文
2015/05/06 职场文书