分享JavaScript获取网页关闭与取消关闭的事件


Posted in Javascript onDecember 13, 2013

在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器。如果用户选择了离开,那么onunload事件自然会触发;但若用户选择了取消,又该如何检测呢?

我们假定一个页面离开取消事件,叫做onunloadcancel。显然,这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程:

window.onbeforeunload = function()
{
    return "真的离开?";
}

当用户准备离开页面(比如按下关闭按钮,或者刷新页面等等),onbeforeunload事件触发。我们的脚本无法在这个事件里决定是否阻止页面的关闭,唯一能做到的只有返回一个字符串,这个字符串仅作为说明文字出现在关闭选择对话框里,用户可以选择关闭,或者不关闭。但究竟选择哪个,我们无从得知。

然而仔细分析下这个问题,其实不然。 如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。

<script language="JavaScript">
window.onbeforeunload = function()
{
    setTimeout(onunloadcancel, 10);
    return "真的离开?";
}
window.onunloadcancel = function()
{
    alert("取消离开");
}
</script>

我们使用setTimeout,延时10ms执行onunloadcancel。如果页面真关闭了,定时器当然都销毁;反之继续。但在测试中,发现FireFox有个两个BUG:

有时按下关闭按钮,也会执行onunloadcancel,并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死,这说明onunloadcancel确实是执行了,只是销毁了界面,但并没有暂停脚本的运行。
如果是通过刷新页面的方式离开,仅执行一次onbeforeunload,但点击X按钮关闭页面,会执行两次onbeforeunload。因此我们还需在完善下,以便兼容FF。

<script language="JavaScript">
var _t;
window.onbeforeunload = function()
{
    setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
    return "真的离开?";
}
window.onunloadcancel = function()
{
    clearTimeout(_t);
    alert("取消离开");
}
</script>

这里使用了一种我也说不出原因的办法,应该算是hack,解决了FF下的bug。
Javascript 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
javascript实现日期格式转换
Dec 16 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
js仿微博动态栏功能
Feb 22 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 #Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 #Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 #Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 #Javascript
js获取html页面节点方法(递归方式)
Dec 13 #Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 #Javascript
javascript读取xml实现javascript分页
Dec 13 #Javascript
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
文本框文本自动补全效果示例分享
2014/01/19 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
一个超级简单的python web程序
2014/09/11 Python
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python列表append和+的区别浅析
2015/02/02 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python根据时间获取周数代码实例
2019/09/30 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
庆祝国庆节标语
2014/10/09 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
Python的property属性详细讲解
2022/04/11 Python