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


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实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
vue实现简易的双向数据绑定
Dec 29 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php实现登陆模块功能示例
2016/10/20 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python完全新手教程
2007/02/08 Python
Python常见数据结构详解
2014/07/24 Python
Python入门篇之字符串
2014/10/17 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
详解python数据结构和算法
2019/04/18 Python
python第三方库学习笔记
2020/02/07 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
营销与策划实训报告
2014/11/05 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
logback如何自定义日志存储
2021/08/30 Java/Android