破解 AJAX 歷史導航難題：自定義歷史堆疊實現後退、前進與刷新功能

問題根源：瀏覽器歷史機制與 RIA 的衝突

傳統 Web 以頁面跳轉為單位，瀏覽器工具列的「後退/前進」按鈕天然匹配。但 AJAX/Rich Internet Application 在單頁內完成多次狀態變更，導致：

• 用戶點擊「後退」期望回到上一個 AJAX 狀態，實際卻跳離整個應用。
• 「前進/重整」同樣失效，用戶體驗斷裂。
• 出於安全，開發者無法直接操作瀏覽器原生歷史堆疊。

解決方案：客戶端自維護歷史堆疊

在 JavaScript 中建立一個陣列 historyStack 模擬 LIFO（後進先出）結構，搭配指標 stackPointer 指向當前狀態。

核心資料結構

var historyStack = [];  // 儲存狀態快照：{stateData, urlFragment, timestamp}
var stackPointer = -1;  // -1 表示空堆疊

狀態變更時（點擊連結、送出表單、篩選列表）

1. 將新狀態 push 進堆疊：historyStack.push(newState)。
2. 移動指標：stackPointer = historyStack.length - 1。
3. 更新 URL Fragment（#stateId）供書籤/分享使用，不觸發頁面重載。

自定義導航按鈕邏輯

function goBack() {
  if (stackPointer > 0) {
    stackPointer--;
    restoreState(historyStack[stackPointer]);
  }
}
function goForward() {
  if (stackPointer < historyStack.length - 1) {
    stackPointer++;
    restoreState(historyStack[stackPointer]);
  }
}
function refresh() {
  restoreState(historyStack[stackPointer]); // 重新套用當前狀態
}

恢復狀態通用函數

function restoreState(state) {
  // 1. 根據 state.urlFragment 發送 AJAX 請求
  // 2. 回調中更新 DOM：填充列表、表單、分頁等
  // 3. 同步更新自定義按鈕啟用/禁用狀態
  updateNavButtons();
}

與瀏覽器原生按鈕共存策略

• 隱藏或禁用原生工具列（僅限 kiosk 模式可行）。
• 在頁面頂部固定自定義導航列（後退、前進、重整、首頁），樣式與系統一致。
• 監聽 window.onhashchange（HTML5）或輪詢 location.hash，當用戶手動修改片段或使用書籤進入時，同步 stackPointer 並恢復狀態。

可用性考量

1. 按鈕狀態即時反映：無上一步時「後退」置灰，無下一步時「前進」置灰。
2. 狀態快照僅序列化必要資料（如分頁頁碼、篩選條件、滾動位置），避免記憶體膨脹。
3. 提供鍵盤快捷鍵：Alt+Left 後退、Alt+Right 前進、F5 重整。
4. 針對螢幕閱讀器輸出 ARIA 標籤：aria-label="回到上一步"。

進階：HTML5 History API 現代寫法

現代瀏覽器支援 history.pushState()、replaceState()、popstate 事件，可直接操作原生歷史，無需手工堆疊。但理解手工堆疊原理有助於兼容舊瀏覽器與掌握核心邏輯。