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


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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
基于Vue实现微前端的示例代码
Apr 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生成静态页面详解
2006/11/19 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
python实现图片批量剪切示例
2014/03/25 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
医院总经理岗位职责
2014/02/04 职场文书
文科生自我鉴定
2014/02/15 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
男方婚礼答谢词
2015/01/20 职场文书
出生公证书
2015/01/23 职场文书
圣诞晚会主持词
2015/07/01 职场文书
新党员入党决心书
2015/09/22 职场文书
医生行业员工的辞职信
2019/06/24 职场文书