如何區分刷新（通過F5 /刷新按鈕）和關閉瀏覽器？

我有要求處理瀏覽器上的事件，如回來，刷新和跨瀏覽器關閉。問題是我的客戶需要針對每個事件採用不同的邏輯。對於後退按鈕，該解決方案是相當精緻：如何區分刷新（通過F5 /刷新按鈕）和關閉瀏覽器？

https://stackoverflow.com/a/36786695/3462243

，但現在很難刷新和密切加以區分，所有的解決方案，我發現是關於使用「beforeunload」事件：

刷新，我可以在鍵盤上趕上事件，但是當瀏覽器用戶按刷新按鈕，我不能。如果我使用「beforeunload」，則關閉瀏覽器事件也是一樣。

我還發現了一個變通方法解決方案：

但不幸的是，我想要做的是顯示頁面卸載之前消息（顯示在瀏覽器接近但不刷新時）

有沒有人知道它的解決方案（跨瀏覽器）

謝謝

來源

2017-08-02 uncle bob

您可能想要使用Cookies/window.sessionStorage。

您可以設置一個沒有明確過期日期的cookie，以便它僅適用於當前會話（在用戶關閉瀏覽器窗口之前有效）。
您也可以使用sessionStorage對象，它僅存儲一個會話的數據。當用戶關閉特定瀏覽器選項卡時，數據將被刪除。

您可以按照appraoch：
1.創建一個cookie時，用戶第一次訪問該頁面document.cookie = "userloggedin=true";或設置sessionStorage.userLoggedIn = true;

2.Cookie將刷新/關閉並重新打開選項卡後可用，如果cookie是不存在那麼它意味着用戶關閉了窗口並重新打開了它。
同樣sessionStorage數據將被刪除後用戶關閉瀏覽器選項卡

希望這有助於！

來源

2017-08-02 04:57:35 Winnie

嗨@ankit_sharma 我認爲localStorage會更好 –

我認爲sessionStorage會更好：P – Winnie

是的，它適用於我的情況。在beforeunload我設置標誌isUnloadPage，並在加載事件我可以得到這個標誌，所以我可以知道用戶只是刷新頁面，如果用戶關閉瀏覽器，我的加載功能將無法正常工作。不知何故它是解決方法。謝謝 –

-1

您可以使用瀏覽器的performance.navigation對象來檢測您的頁面的導航類型。

var navigationType = performance.navigation.type; 

if (navigationType === performance.navigation.TYPE_BACK_FORWARD) { 
    console.log("Back/Forward button"); 
} else if (navigationType === performance.navigation.TYPE_RELOAD) { 
    console.log("Reloaded"); 
} else if (navigationType === performance.navigation.TYPE_NAVIGATE) { 
    console.log("Normal navigation"); 
}

而且onbeforeunload事件可以照常使用來檢測瀏覽器關閉。請參閱this documentation以瞭解有關導航常量的更多信息。

來源

2017-08-02 04:57:23 31piy

嗨@ 31piy 我嘗試使用IE 11.1480.14393.0，但它不起作用。當我點擊刷新圖標時，導航類型始終爲0. –

@unclebob - Per [this link]（https://msdn.microsoft.com/en-us/library/ff974736（v = vs.85）.aspx）它應該返回'1'。你在哪裏取得它？你能用代碼更新你的問題嗎？ – 31piy

喜@ 31piy 這裏是我的代碼 >>> '$（文件）。就緒（函數（）{ \t handleUnloadPage（）; }）; 功能handleUnloadPage（）{ \t $（窗口）.bind（「beforeunload」，函數（E）{ \t \t變種navigationType = performance.navigation; \t \t如果（navigationType === performance.navigation.TYPE_BACK_FORWARD） { \t \t \t的console.log（「後退/前進鍵」）; \t \t \t}否則如果（navigationType === performance.navigation.TYPE_RELOAD）{ \t \t \t的console.log（「重裝上陣」）; \t \t \t} else if（navigationType === performance.navigation.TYPE_NAVIGATE）{ \t \t \t console.log（「Normal navigation」）; \t \t \t} \t}）; }' 就是這樣 –

如何區分刷新（通過F5 /刷新按鈕）和關閉瀏覽器？

回答

相關問題