时间:2021-05-25
在做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。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
FormClosing事件在窗体关闭时,FormClosing事件发生。此事件会得到处理。从而释放与窗体相关的所有资源。如果取消此事件,则窗体仍然保持打开状态。
本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法。分享给大家供大家参考,具体如下:在一些不正规的网站,尤其是那些挂满广告的下载站
本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法。分享给大家供大家参考。具体分析如下:这里点击按钮后,弹出一个可关闭的层
本文实例讲述了Vue实例事件。分享给大家供大家参考,具体如下:Vue实例事件Vue实例事件{{num}}addreducereduceonce关闭事件varap
本文实例讲述了WinForm判断关闭事件来源于用户点击右上角“关闭”按钮的方法。分享给大家供大家参考。具体如下:protectedoverridevoidWnd