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


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代码
Sep 22 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
JS提交form表单实例分析
Dec 10 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
Vue可自定义tab组件用法实例
Oct 24 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 正则 过滤html 的超链接
2009/06/02 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
使用jquery实现放大镜效果
2014/09/02 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
微信小程序页面间通信的5种方式
2017/03/31 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python之父谈Python的未来形式
2016/07/01 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python3最长回文子串算法示例
2019/03/04 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
农民致富事迹材料
2014/01/23 职场文书
财务总监岗位职责
2014/03/07 职场文书
专职安全员岗位职责
2015/04/11 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
Python之基础函数案例详解
2021/08/30 Python