監(jiān)聽瀏覽器刷新及關(guān)閉

AWang 發(fā)布于2019-08-26 13:57 / 1677人閱讀

摘要：解決思路對于瀏覽器的關(guān)閉和刷新會觸發(fā)兩個事件和，問題在于如何區(qū)分用戶是想刷新還是退出此時應(yīng)該將用戶催眠，然后獲得用戶的思想，預(yù)判用戶走位及操作。。。事件是無法阻止頁面關(guān)閉的。

需求背景： 為保證‘高度安全性’，用戶每次退出頁面或瀏覽器都要清除登陸信息，每次進(jìn)入系統(tǒng)都要重新登陸（每次登陸還要手機(jī)驗證碼等亂七八糟的驗證信息，，，求用戶的心里陰影面積），但是刷新頁面不可以清除登陸信息。
解決思路： javascript 對于瀏覽器的關(guān)閉和刷新會觸發(fā)兩個事件 onbeforeunload()和onunload()，問題在于如何區(qū)分用戶是想刷新還是退出（此時應(yīng)該將用戶催眠，然后獲得用戶的思想，預(yù)判用戶走位及操作。。。），本文主要記錄這兩個方法的區(qū)別，設(shè)備兼容性及如何催眠用戶（開玩笑的），是如何區(qū)分刷新和退出瀏覽器

onbeforeunload()和onunload()

onbeforeunload 和 onunload 都是在頁面刷新或退出時觸發(fā)的事件

用法：

事件	用法
onunload	window.onunload=function(){SomeJavaScriptCode};
onbeforeunload	window.onbeforeunload=function(){SomeJavaScriptCode};

區(qū)別：

unbeforeunload()是在頁面刷新或關(guān)閉之前觸發(fā)的事件，而onubload()是在頁面刷新或關(guān)閉之后才會觸發(fā)的。

unbeforeunload()事件執(zhí)行的順序在onunload()事件之前發(fā)生。

unbeforeunload()事件可以禁止onunload()事件的觸發(fā)。

onunload()事件是無法阻止頁面關(guān)閉的。

兼容性（pc）：

事件	Chrome	Firefox	IE	Opera	Safari
onunload	yes	yes	yes	yes	yes
onbeforeunload	1	1	4	12	3

注意：onbeforeunoad 在移動端基本都不兼容，onunload則兼容大部分主流移動端瀏覽器

參考文獻(xiàn)：
MDN: window.onbeforeunload
MDN: window.onunload

區(qū)分刷新和退出

在瀏覽器關(guān)閉前是無法判斷用戶是刷新還是退出，所以我們在用戶再次打開的時候來判斷用戶是否刷新
解決思路：

用戶關(guān)閉瀏覽器時，記錄當(dāng)前時間，并存于瀏覽器緩存中
用戶再次打開頁面時，獲取上次退出的時間，并于當(dāng)前時間進(jìn)行比較，若小于5s則表示用戶執(zhí)行的是刷新操作，若大于5s則判定為退出

注意： 5s并非固定，要根據(jù)實際情況調(diào)整

上代碼：

// 進(jìn)入頁面執(zhí)行
// 記錄當(dāng)前時間并轉(zhuǎn)成時間戳
const now = new Date().getTime();
// 從緩存中獲取用戶上次退出的時間戳
const leaveTime = parseInt(localStorage.getItem("leaveTime"), 10);
// 判斷是否為刷新，兩次間隔在5s內(nèi)判定為刷新操作
const refresh = (now - leaveTime) <= 5000;
// 測試alert
alert(refresh ? "刷新" : "重新登陸");

// 退出當(dāng)前頁面執(zhí)行
window.onunload = function(e){ // ios 不支持 window.onbeforeunload()
  // 將退出時間存于localstorage中
  localStorage.setItem("leaveTime", new Date().getTime());
}