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


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 相关文章推荐
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
javascript断点调试心得分享
Apr 23 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
基于PHPExcel的常用方法总结
2013/06/13 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python实现栈的方法
2015/05/26 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
PyTorch中的C++扩展实现
2020/04/02 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
社会实践心得体会
2014/01/03 职场文书
安全协议书
2014/04/23 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android