vue監聽瀏覽器刷新和關閉事件，并在頁面關閉/刷新前發送請求

• • 1.需求背景：
  • 2.需求分析：
  • 3.實現方式：
  • 4.實現方式解析：
  • • • 1）瀏覽器頁面事件基礎
      • 2）在mounted監聽beforeunload和unload事件
  • 5.存在的問題/風險點：
  • • • 1）為了避免意外彈出窗口，在頁面加載完畢的情況下，用戶沒有click、dbclick、touch等主動交互行為，直接執行關閉/刷新操作是不會彈出提示框的；
      • 2）瀏覽器提示框的樣式和內容是默認的，不能更改；
      • 3）在關閉/刷新頁面前發送的請求，如果使用axios方式，由于是異步的，在執行刷新/關閉操作時，存在請求還未發送到服務端就被瀏覽器cancle掉。Fetch API提供了一套健壯的與服務器端交互的方式，提供了跨越不同平臺 API 的一致接口。它提供了一個keepalive屬性，保證不管發送請求的頁面關閉與否，請求都會持續直到結束。不過上傳數據的限制是64 KB。
      • 4）在執行刷新頁面操作時，觸發請求，在控制臺中會發現該請求一直在pending狀態中，但其實服務器端已經接收到該請求，親測有效！

1.需求背景：

用戶離開頁面前，修改數據未進行保存操作，提示框提醒用戶，并發送接口請求告知后端清空已修改數據。

2.需求分析：

可以再在beforeDestory鉤子函數中，調用接口操作，但該方法只能實現路由切換，當前組件銷毀時會觸發，不能解決瀏覽器頁面關閉和頁面刷新觸發該請求，所以還是要借助window.onbeforeunload事件。

3.實現方式：

mounted() {window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));window.addEventListener('unload', this.updateHandler);} beforeunloadHandler(e) {e = e || window.event;if (e) {e.returnValue = '關閉提示';}return '關閉提示';} updateHandler() {fetch('url', {method: 'POST',body:'參數'headers: {'Content-Type': 'application/json'},keepalive: true});}

4.實現方式解析：

1）瀏覽器頁面事件基礎

頁面加載時只執行 onload 事件。
頁面關閉時，先 onbeforeunload 事件，再 onunload 事件。
頁面刷新時先執行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件。

2）在mounted監聽beforeunload和unload事件

當執行頁面刷新關閉操作時，會觸發onbeforeunload事件，在該事件綁定的方法中，return一個值（為true的值）瀏覽器會彈出一個提示框，否則不會彈出，提示框如下圖所示

當點擊取消按鈕時，會阻斷，不會執行任何操作，當點擊重新加載/離開按鈕時會觸發unload事件，在該事件中調用請求方法即可。

5.存在的問題/風險點：

1）為了避免意外彈出窗口，在頁面加載完畢的情況下，用戶沒有click、dbclick、touch等主動交互行為，直接執行關閉/刷新操作是不會彈出提示框的；

2）瀏覽器提示框的樣式和內容是默認的，不能更改；

3）在關閉/刷新頁面前發送的請求，如果使用axios方式，由于是異步的，在執行刷新/關閉操作時，存在請求還未發送到服務端就被瀏覽器cancle掉。Fetch API提供了一套健壯的與服務器端交互的方式，提供了跨越不同平臺 API 的一致接口。它提供了一個keepalive屬性，保證不管發送請求的頁面關閉與否，請求都會持續直到結束。不過上傳數據的限制是64 KB。

4）在執行刷新頁面操作時，觸發請求，在控制臺中會發現該請求一直在pending狀態中，但其實服務器端已經接收到該請求，親測有效！

總結

以上是生活随笔為你收集整理的vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。