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


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 $.each()使用探讨
Sep 23 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 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文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
JS调试必备的5个debug技巧
2014/03/07 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
python实现目录树生成示例
2014/03/28 Python
python 求10个数的平均数实例
2019/12/16 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
基于python3生成标签云代码解析
2020/02/18 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
linux面试题参考答案(6)
2016/06/23 面试题
车间调度岗位职责
2013/11/30 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
小学语文国培研修日志
2015/11/13 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书