頁面回退監聽的核心在于感知瀏覽器的歷史記錄變化，最常用的方法是使用window.onpopstate事件，該事件在用戶點擊前進/后退按鈕時觸發，但pushstate和replacestate不會觸發；其次可以使用hashchange事件監聽url hash的變化；另外可以通過history.pushstate和history.replacestate結合sessionstorage來更精細地控制頁面狀態；不推薦使用beforeunload事件和輪詢檢測history.Length的方式；為避免頁面回退時重新加載數據，可使用cache-control頭部、localstorage/sessionstorage緩存數據或使用spa框架；直接阻止瀏覽器后退按鈕不可行，更好的做法是提供自定義導航或在特定情況下通過history.pushstate提示用戶是否離開；要區分前進和后退事件，可通過維護歷史記錄棧比較當前url與棧頂url進行判斷。
頁面回退監聽的核心在于感知瀏覽器的歷史記錄變化。JS提供了多種方法實現，但需要根據具體場景選擇最合適的方案。
解決方案
-
window.onpopstate 事件: 這是最常用的方法，當瀏覽器的歷史記錄發生改變（前進或后退）時，會觸發該事件。但需要注意的是，pushState 和 replaceState 方法不會觸發 popstate 事件，除非用戶點擊瀏覽器的前進/后退按鈕。
window.onpopstate = function(Event) { console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); // 在這里處理頁面回退邏輯 };
event.state 包含了通過 pushState 傳遞的狀態對象，可以用來區分不同的歷史記錄狀態。
-
hashchange 事件: 如果你的應用使用了 URL hash 來管理狀態，那么可以使用 hashchange 事件監聽 URL hash 的變化。
window.addEventListener("hashchange", function(event) { console.log("Old URL: " + event.oldURL); console.log("New URL: " + event.newURL); // 在這里處理頁面回退邏輯 });hashchange 事件在 URL 的 hash 部分發生變化時觸發。
-
history.pushState 和 history.replaceState 結合 sessionStorage: 通過在 pushState 和 replaceState 中維護一個 sessionStorage 的狀態，可以在 popstate 事件中讀取 sessionStorage 來判斷當前狀態。
// 初始狀態 sessionStorage.setItem('pageState', 'page1'); // pushState history.pushState({page: 'page2'}, 'Page 2', '/page2'); sessionStorage.setItem('pageState', 'page2'); window.onpopstate = function(event) { const currentState = sessionStorage.getItem('pageState'); console.log('Current State:', currentState); // 根據 currentState 處理頁面回退邏輯 };這種方法可以更精細地控制頁面狀態。
-
beforeunload 事件 (不推薦): 雖然可以檢測到頁面即將卸載，但無法區分是前進、后退還是刷新/關閉。而且，瀏覽器對 beforeunload 事件的處理越來越嚴格，可能無法完全滿足需求。
window.onbeforeunload = function(event) { // 盡量避免使用，因為無法區分前進/后退 };不推薦使用 beforeunload 來監聽后退事件。
-
輪詢檢測 history.length (不推薦): 通過定時檢查 history.length 的變化，可以粗略地判斷是否發生了前進或后退。但這種方法效率低下，不準確，而且會增加瀏覽器的負擔。
let historyLength = history.length; setInterval(() => { if (history.length !== historyLength) { console.log('History changed!'); historyLength = history.length; // 處理頁面回退邏輯 } }, 500);強烈不建議使用輪詢的方式。
如何避免頁面回退時重新加載數據？
頁面回退時重新加載數據通常是因為瀏覽器沒有緩存頁面?？梢試L試以下方法：
- 使用 Cache-Control 頭部: 在服務器端設置 Cache-Control 頭部，告訴瀏覽器緩存頁面。例如：Cache-Control: max-age=3600 表示緩存 1 小時。
- 使用 localStorage 或 sessionStorage 緩存數據: 在頁面加載時將數據存儲到 localStorage 或 sessionStorage 中，回退時直接從緩存中讀取。
- 使用 SPA 框架: SPA (Single Page Application) 框架通常會自己管理路由和狀態，避免了瀏覽器的完整頁面刷新。
如何阻止用戶使用瀏覽器后退按鈕？
直接阻止瀏覽器的后退按鈕是不可能的，也是不推薦的。更好的做法是：
- 提供自定義的導航: 在你的應用中提供自定義的導航控件，讓用戶通過這些控件進行頁面跳轉，而不是依賴瀏覽器的前進/后退按鈕。
- 在特定情況下禁用后退: 例如，在用戶正在填寫表單時，可以提示用戶是否要放棄更改，避免意外丟失數據。
window.onpopstate = function(event) { if (formIsDirty()) { // 假設 formIsDirty() 函數檢查表單是否被修改 if (!confirm("Are you sure you want to leave this page? Your changes will be lost.")) { history.pushState(null, null, document.URL); // 阻止后退 } else { // 處理離開頁面的邏輯 } } };
注意: 頻繁使用 history.pushState 阻止后退會影響用戶體驗，應謹慎使用。
如何區分前進和后退事件？
popstate 事件的 event.state 屬性可以用來區分前進和后退，但前提是在 pushState 中設置了不同的狀態。另一種方法是維護一個歷史記錄棧，記錄用戶的訪問路徑，然后在 popstate 事件中比較當前 URL 和棧頂的 URL，從而判斷是前進還是后退。
let historyStack = [document.URL]; history.pushState({page: 'page1'}, 'Page 1', '/page1'); historyStack.push('/page1'); history.pushState({page: 'page2'}, 'Page 2', '/page2'); historyStack.push('/page2'); window.onpopstate = function(event) { const currentURL = document.URL; const previousURL = historyStack[historyStack.length - 1]; if (currentURL === previousURL) { // 后退 historyStack.pop(); console.log('Navigated Back'); } else { // 前進 (假設前進后會push新的state) historyStack.push(currentURL); console.log('Navigated Forward'); } console.log('Current URL:', currentURL); };
這種方法需要更復雜的邏輯來維護歷史記錄棧，但可以更準確地判斷前進和后退。
