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


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 相关文章推荐
JS 操作符整理[推荐收藏]
Nov 15 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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
php中的时间处理
2006/10/09 PHP
php开发环境配置记录
2011/01/14 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python实现LRU算法的2种方法
2015/06/24 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python框架中flask知识点总结
2018/08/17 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
应聘自荐书
2013/10/08 职场文书
教育学习自我评价
2014/02/03 职场文书
求职意向书
2014/04/01 职场文书
环保专项行动方案
2014/05/12 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
暑期培训班策划方案
2014/08/26 职场文书
万能检讨书2000字
2014/10/17 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python