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

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

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

onbeforeunload & onunload

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

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

  1. onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。

  2. 如果当前情况是离开页面进去到下一个页面,那么onbeforeunload触发时还没有去服务器请求下一个页面的数据(HTML资源文件),onunload则已经从服务器上读到了需要加载的新页面的资源(HTML资源文件),在即将替换掉当前页面时调用。

  3. 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>

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

周周练
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。