DDR爱好者之家

分享JavaScript获取网页关闭与取消关闭的事件
站长资源 2025/1/21 佚名
44 1538
DDR爱好者之家 Design By 杰米

在做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。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米