兼容性强的js捕捉网页刷新关闭退出事件的方法

当我们离开一个网页时，往往需要提醒用户自己的这一行为，比如我正在编辑一个文档，或者我是在使用网上银行，我希望在自己操作失误之后能给我一次改正的机会。这里说道的离开一个网页，其实分为好几种情况：刷新 关闭 后退
我们经常用到页面关闭事件onbeforeunload，可以给用户一个选择放弃关闭的机会，就比如这个博客编辑器。如果用户选择了离开，那么onunload事件自然会触发；但若用户选择了取消（或者是留在此页），又该如何检测呢？

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

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

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

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

window.onunloadcancel = function()
{
    alert("取消离开");
}
</script>

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

1. 有时按下关闭按钮，也会执行onunloadcancel，并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死，这说明onunloadcancel确实是执行了，只是销毁了界面，但并没有暂停脚本的运行。
2. 如果是通过刷新页面的方式离开，仅执行一次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>

这里使用了一种我也说不出原因的办法，解决了FF下的bug。http://www.android100.org/html/201405/24/13164.html

转载于:https://www.cnblogs.com/xiamicomeon/p/4601803.html