捕捉网页关闭与取消关闭事件
2013-09-27 16:18
323 查看
在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器。如果用户选择了离开,那么onunload事件自然会触发;但若用户选择了取消,又该如何检测呢?
我们假定一个页面离开取消事件,叫做onunloadcancel。显然,这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程:
view source
print?
当用户准备离开页面(比如按下关闭按钮,或者刷新页面等等),onbeforeunload事件触发。我们的脚本无法在这个事件里决定是否阻止页面的关闭,唯一能做到的只有返回一个字符串,这个字符串仅作为说明文字出现在关闭选择对话框里,用户可以选择关闭,或者不关闭。但究竟选择哪个,我们无从得知。
然而仔细分析下这个问题,其实不然。 如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。
view source
print?
我们使用setTimeout,延时10ms执行onunloadcancel。如果页面真关闭了,定时器当然都销毁;反之继续。但在测试中,发现FireFox有个两个BUG:
有时按下关闭按钮,也会执行onunloadcancel,并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死,这说明onunloadcancel确实是执行了,只是销毁了界面,但并没有暂停脚本的运行。
如果是通过刷新页面的方式离开,仅执行一次onbeforeunload,但点击X按钮关闭页面,会执行两次onbeforeunload。因此我们还需在完善下,以便兼容FF。
view source
print?
这里使用了一种我也说不出原因的办法,应该算是hack,解决了FF下的bug。
http://www.nowamagic.net/javascript/js_Onbeforeunload.php
我们假定一个页面离开取消事件,叫做onunloadcancel。显然,这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程:
view source
print?
1 | window.onbeforeunload = function () |
2 | { |
3 | return "真的离开?" ; |
4 | } |
然而仔细分析下这个问题,其实不然。 如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。
view source
print?
01 | <script language= "JavaScript" > |
02 | window.onbeforeunload = function () |
03 | { |
04 | setTimeout(onunloadcancel, 10); |
05 | return "真的离开?" ; |
06 | } |
07 |
08 | window.onunloadcancel = function () |
09 | { |
10 | alert( "取消离开" ); |
11 | } |
12 | </script> |
有时按下关闭按钮,也会执行onunloadcancel,并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死,这说明onunloadcancel确实是执行了,只是销毁了界面,但并没有暂停脚本的运行。
如果是通过刷新页面的方式离开,仅执行一次onbeforeunload,但点击X按钮关闭页面,会执行两次onbeforeunload。因此我们还需在完善下,以便兼容FF。
view source
print?
01 | <script language= "JavaScript" > |
02 | var
|
03 | window.onbeforeunload = function () |
04 | { |
05 | setTimeout( function (){_t = setTimeout(onunloadcancel, 0)}, 0); |
06 | return "真的离开?" ; |
07 | } |
08 |
09 |
10 | window.onunloadcancel = function () |
11 | { |
12 | clearTimeout(_t); |
13 | alert( "取消离开" ); |
14 | } |
15 | </script> |
http://www.nowamagic.net/javascript/js_Onbeforeunload.php
相关文章推荐
- 分享JavaScript获取网页关闭与取消关闭的事件
- 分享JavaScript获取网页关闭与取消关闭的事件
- 脚本捕捉网页的关闭按钮的关闭事件
- 兼容性强的js捕捉网页刷新关闭退出事件的方法
- 在用户关闭网页时捕捉关闭事件,并进行清除session操作
- JavaScript获取网页关闭与取消关闭的事件
- js怎么捕捉网页的刷新事件,捕捉页面所有可以关闭窗口的事件
- 分享JavaScript获取网页关闭与取消关闭的事件
- 脚本捕捉网页关闭事件
- Activex感知网页关闭事件
- 取消Bootstrap的dropdown-menu点击默认关闭事件
- 关闭按钮点击事件的捕捉
- web 关闭事件捕捉
- [转]如何捕捉WEB窗体关闭事件
- 手机网页中,长按会触发系统事件,怎么取消这些事件?
- 手机网页取消长按事件
- 捕捉 程序关闭或者 进入后台事件
- 如何捕捉控制台程序的关闭事件。
- Qt捕捉窗口关闭事件与信号的捕捉
- 当前网页关闭事件拦截onbeforeunload ,visibilitychange