博客

背景：

大家是否经常遇到关闭页面的时候或者页面的时候，都会弹出一个弹框，问你是否保存数据或者是否可以刷新，目的就是防止不经意刷新导致页面数据丢失，很多人会用到本地存储，但是这样做比较麻烦，根本上就是提示用户，是否进行刷新或者是退出此页面，今天我们已经了解window浏览器自带的刷新拦截提示

利用了HTML DOM事件中的onunload和onbeforeunload方法。

1、onunload

onunload 事件在用户退出页面时发生。

onunload 发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)

注意： onunload 事件同样触发了页面载入事件(+ onload 事件)。

2、onbeforeunload

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。

注意：在vue中比较特殊，因为vue是组件的思想，所以用会影响全局,所以在用的时候还是慎重

简单使用


mouted


 window.addEventListener("beforeunload", e => {
    this.beforeunloadHandler(e);
 });


destroyed


window.removeEventListener("beforeunload", e => {
    this.beforeunloadHandler(e);
});


mouted


beforeunloadHandler(e) {
  e = e || window.event;
  if (e) {
    e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
  }
  return "您是否确认离开此页面-您输入的数据可能不会被保存";
},