📢 学习 - 监听游览器页面的关闭

SLYLXDYMJ

字数：378 字

时长：1 分钟

项目中常见在页面/游览器关闭时，需要做某些特定操作，
难点在于如何的监听，原生的使用方法有点绕。

beforeunload

用户关闭、刷新页面，关闭游览器等操作时会触发。
触发的同时游览器会弹出一个丑陋的类似 window.confirm 的窗口。
无法修改内容，无法替换，无法获取用户点击的结果，但是可以隐藏。

window.addEventListener('beforeunload', function (event) {
  // returnValue 只要设置了任意值，就会弹框提示用户。
  // 若不设置，则不会弹框。
  if (event) {
    e.returnValue = true
  }
  
  // 其他操作...
})

window.removeEventListener('beforeunload', handler)

unload

吐槽：这个事件，对于开发，并没有什么卵用

这玩意知道了就行了，实际上完全被 beforeunload 所替代。
理论上部分操作是需要在 “用户确定关闭/刷新页面后” 执行，
但是实际上在 unload 回调中，限制很多，
比如说无法发送请求等等等等…..

目前已知的可行操作：

• 可以向 localStorage、sessionStorage 中写入。

window.addEventListener('unload', function () {
  // 限制太多，啥也干不了.....
})

window.removeEventListener('unload', handler)

总结

真的碰到了 “用户离开/刷新页面前执行特定逻辑” 的这种需求时，
建议用 beforeunload 事件，而不是 unload，因为限制太多了。
beforeunload 弹出的 “丑陋的框” 中，
不管用户点击的是什么，都执行逻辑，因为根本也获取不到用户点击的结果。