簡述在Js或Vue中監聽頁面的刷新、關閉操作

本文轉載自查看原文 2019-10-24 15:57 7341 原生JS/ Vue

1、背景

大家是否經常遇到在關閉網頁的時候，會看到一個確定是否離開當前頁面的提示框？想一些在線測試系統、信息錄入系統等就經常會有這一些提示，避免用戶有意或者無意中關掉了頁面，導致數據丟失。而最近在做項目的時候有一個需求，用戶在表單頁面中進行操作，為了防止用戶在未保存表單數據的情況下離開、刷新頁面等造成數據的丟失，需要在這種操作下出現是否離開的提示框，這里面的實現過程很簡單，利用了HTML DOM事件中的onunload和onbeforeunload方法。

2、解決思路

  阻攔，每次就是阻攔，而阻攔又有兩種方法，一種是直接return，不管return的是什么；一種是修改事件的returnValue，兩者效果是一樣的。

3、兩個屬性的對比

定義

onbeforeunload ：

onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。
該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面還是離開當前頁面。
對話框默認的提示信息根據不同的瀏覽器有所不同，標准的信息類似 "確定要離開此頁嗎？"。該信息不能刪除。

但你可以自定義一些消息提示與標准信息一起顯示在對話框。
注意： 如果你沒有在 <body> 元素上指定 onbeforeunload 事件，則需要在 window 對象上添加事件，並使用 returnValue 屬性創建自定義信息(查看以下語法實例)。
注意： 在 Firefox 與 Chrome 瀏覽器中，只顯示默認提醒信息（不顯示自定義信息）

onunload ：

onunload 事件在用戶退出頁面時發生。
onunload 發生於當用戶離開頁面時發生的事件(通過點擊一個連接，提交表單，關閉瀏覽器窗口等等。)

注意： onunload 事件同樣觸發了頁面載入事件(+ onload 事件)。

瀏覽器對onbeforeunload與onunload兩個屬性的支持程度
- onbeforeunload ：
- onunload ：

使用

onbeforeunload ：

//body中
<body onbeforeunload="beforeunloadHandler()"></body>

//window中  vue寫在mounted中
window.onbeforeunload = function(e) {
    e = e || window.event;
   // 兼容IE8和Firefox 4之前的版本
   if (e) {
      e.returnValue = "您是否確認離開此頁面-您輸入的數據可能不會被保存";
   }
   // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
   return "您是否確認離開此頁面-您輸入的數據可能不會被保存";
};

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

onunload ：

//body中
<body onunload="beforeunloadHandler()"></body>

//window中  vue寫在mounted中
window.onunload = function(e) {
    e = e || window.event;
   // 兼容IE8和Firefox 4之前的版本
   if (e) {
      e.returnValue = "您是否確認離開此頁面-您輸入的數據可能不會被保存";
   }
   // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
   return "您是否確認離開此頁面-您輸入的數據可能不會被保存";
};

兩者之間的區別

onbeforeunload、onunload都是在刷新或關閉時調用，可以在<body>里指定，也可以在原生的JS中在<script>腳本中通過window.方法名或者在vue的mounted里面通過window.方法名
進行指定，區別在於onbeforeunload在onunload之前執行，它還可以阻止onunload的執行。onbeforeunload是正要去服務器讀取新的頁面時調用，此時還沒開始讀取；而onunload則已
經從服務器上讀到了需要加載的新的頁面，在即將替換掉當前頁面時調用。onunload是無法阻止頁面的更新和關閉的，而 onbeforeunload 可以做到。

注意：
　　頁面加載時只執行onload 
　　頁面關閉時先執行onbeforeunload，最后onunload 
　　頁面刷新時先執行onbeforeunload，然后onunload，最后onload

4、簡單使用

JS代碼

mounted

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

destroyed

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

methods

/**
 * [beforeunloadHandler 瀏覽器關閉時進行用戶提示]
 * @return {[type]} [description]
 */
beforeunloadHandler(e) {
  e = e || window.event;
  if (e) {
    e.returnValue = "您是否確認離開此頁面-您輸入的數據可能不會被保存";
  }
  return "您是否確認離開此頁面-您輸入的數據可能不會被保存";
},