vue監(jiān)聽瀏覽器刷新和關(guān)閉事件，并在頁面關(guān)閉/刷新前發(fā)送請(qǐng)求

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

1.需求背景：

用戶離開頁面前，修改數(shù)據(jù)未進(jìn)行保存操作，提示框提醒用戶，并發(fā)送接口請(qǐng)求告知后端清空已修改數(shù)據(jù)。

2.需求分析：

可以再在beforeDestory鉤子函數(shù)中，調(diào)用接口操作，但該方法只能實(shí)現(xiàn)路由切換，當(dāng)前組件銷毀時(shí)會(huì)觸發(fā)，不能解決瀏覽器頁面關(guān)閉和頁面刷新觸發(fā)該請(qǐng)求，所以還是要借助window.onbeforeunload事件。

3.實(shí)現(xiàn)方式：

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

4.實(shí)現(xiàn)方式解析：

1）瀏覽器頁面事件基礎(chǔ)

頁面加載時(shí)只執(zhí)行 onload 事件。
頁面關(guān)閉時(shí)，先 onbeforeunload 事件，再 onunload 事件。
頁面刷新時(shí)先執(zhí)行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件。

2）在mounted監(jiān)聽beforeunload和unload事件

當(dāng)執(zhí)行頁面刷新關(guān)閉操作時(shí)，會(huì)觸發(fā)onbeforeunload事件，在該事件綁定的方法中，return一個(gè)值（為true的值）瀏覽器會(huì)彈出一個(gè)提示框，否則不會(huì)彈出，提示框如下圖所示

當(dāng)點(diǎn)擊取消按鈕時(shí)，會(huì)阻斷，不會(huì)執(zhí)行任何操作，當(dāng)點(diǎn)擊重新加載/離開按鈕時(shí)會(huì)觸發(fā)unload事件，在該事件中調(diào)用請(qǐng)求方法即可。

5.存在的問題/風(fēng)險(xiǎn)點(diǎn)：

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

2）瀏覽器提示框的樣式和內(nèi)容是默認(rèn)的，不能更改；

3）在關(guān)閉/刷新頁面前發(fā)送的請(qǐng)求，如果使用axios方式，由于是異步的，在執(zhí)行刷新/關(guān)閉操作時(shí)，存在請(qǐng)求還未發(fā)送到服務(wù)端就被瀏覽器cancle掉。Fetch API提供了一套健壯的與服務(wù)器端交互的方式，提供了跨越不同平臺(tái) API 的一致接口。它提供了一個(gè)keepalive屬性，保證不管發(fā)送請(qǐng)求的頁面關(guān)閉與否，請(qǐng)求都會(huì)持續(xù)直到結(jié)束。不過上傳數(shù)據(jù)的限制是64 KB。

4）在執(zhí)行刷新頁面操作時(shí)，觸發(fā)請(qǐng)求，在控制臺(tái)中會(huì)發(fā)現(xiàn)該請(qǐng)求一直在pending狀態(tài)中，但其實(shí)服務(wù)器端已經(jīng)接收到該請(qǐng)求，親測有效！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。