实现浏览器再关闭网页时提醒是否离开弹框

在一些表单填写的页面，或者涉及关键重要信息修改的页面，如果用户在没有保存的情况下刷新或者离开当前页面，通常会见到浏览器弹出“是否离开当前网站”的提示框，那么这种效果是如何实现的呢？其实主要使用了onunload或者onbeforeunload属性。

onbeforeunload & onunload

onbeforeunload事件会在页面关闭之前触发
onunload事件会在页面关闭的时候触发

虽然onunload，onbeforeunload都可以在刷新或关闭时触发，但是通过描述我们还是可以发现它们的一些细微差别。

onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
如果当前情况是离开页面进去到下一个页面，那么onbeforeunload触发时还没有去服务器请求下一个页面的数据（HTML资源文件），onunload则已经从服务器上读到了需要加载的新页面的资源（HTML资源文件），在即将替换掉当前页面时调用。
onbeforeunload是可以阻止页面的更新和关闭的，而onunload则不可以。

实战

onunload，onbeforeunload有两种使用方式:

第一种是声明在html 的 body标签上，然后把一个处理函数赋值给它，如：

<body onbeforeunload="checkLeave()">
  <div>
    <button id="refreshBtn">刷新页面</button>
  </div>
</body>

<script>
function checkLeave(){
  console.log('check leave')
  event.returnValue="确定离开当前页面吗？";
}
</script>

第二种使用方式是在script标签里用dom0 或dom3事件标准来实现：

<body>
<div>
  <button id="refreshBtn">刷新页面</button>
</div>
</body>
<script>
window.onload = function() {
  function checkLeave(){
    console.log('check leave')
    event.returnValue="确定离开当前页面吗？";
  }

  // Dom0事件标准
  window.onbeforeunload = checkLeave;
  // Dom3事件标准
  window.addEventListener('onbeforeunload', checkLeave)
}
</script>

例子：实现浏览器再关闭网页时提醒是否离开弹框