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


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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
JS实现吸顶特效
Jan 08 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Javascript string 扩展库代码
2010/04/09 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
js控制frameSet示例
2013/09/10 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Django stark组件使用及原理详解
2019/08/22 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
德国高尔夫商店:Par71.de
2020/11/29 全球购物
自行车广告词大全
2014/03/21 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
面试复试通知单
2015/04/24 职场文书
运输公司工作总结
2015/08/11 职场文书
Go获取两个时区的时间差
2022/04/20 Golang