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


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 Event对象的5种坐标
Sep 12 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
JS随机数产生代码分享
Feb 24 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
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常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
键盘KeyCode值列表汇总
2013/11/26 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python列表对象实现原理详解
2019/07/01 Python
Django中的用户身份验证示例详解
2019/08/07 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
为什么UNION ALL比UNION快
2016/03/17 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
五一家具促销方案
2014/01/10 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python