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


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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
详解jQuery-each()方法
Mar 13 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
python梯度下降法的简单示例
2018/08/31 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
tensorflow如何批量读取图片
2019/08/29 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
助残日活动总结
2014/08/27 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android