功能实现系列

功能实现之浏览器关闭时弹框提醒

在开发web应用时，有些页面在用户关闭时可能需要保存用户的数据，或者提示用户防止误关

beforeunload 事件

在浏览器中我们可以监听beforeunload事件来知道浏览器即将关闭，并且可以通过给Event对象的returnValue赋值来提示弹框

1
2
3
4
5

window.addEventListener("beforeunload", e => {
    e.returnValue = true
})

然后我们刷新浏览器或者退出浏览器就可以看到弹框了

用处

通过监听到这个事件，我们就有机会在页面关闭前执行一段JS，来保存应用相关的数据

1
2
3
4
5

window.addEventListener("beforeunload", e => {
    //do some things
})

只要是同步的JS就可以完全执行，如果需要异步回调，考虑到用户可能不会留下，所以异步操作不能完全保证

同时JS不能占用太多时间，比如你用一个超大循环在哪卡之类的，浏览器如果检测到JS在一段时间内并没有正确执行，将会直接关闭页面

参考资料

window.onbeforeunload

END

2017-03-10 完成

2017-12-02 立项