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


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 ajax dataType值为text json探索分享
Sep 23 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
vue双向绑定数据限制长度的方法
Nov 04 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
论建造顺序的重要性
2020/03/04 星际争霸
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP安全性漫谈
2012/06/28 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
NumPy统计函数的实现方法
2020/01/21 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
六一儿童节演讲稿
2014/05/23 职场文书
职代会闭幕词
2015/01/28 职场文书
信访工作个人总结
2015/03/03 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
分析并发编程之LongAdder原理
2021/06/29 Java/Android
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript