AJAX 應用中「返回鍵」問題的成因、影響與解決方案

問題本質

AJAX 以單頁面 (SPA) 非同步互動取代傳統「請求 → 整頁回應」模式。瀏覽器歷史堆疊僅記錄完整頁面導航 (超連結、表單提交、location.href 變更)，不會自動記錄 AJAX 狀態變更。導致：

• 使用者點擊「返回」鍵 → 瀏覽器退出當前頁面，而非回到 AJAX 更新前的狀態。
• 書籤/分享 URL 無法還原特定 AJAX 視圖 (如分頁頁碼、篩選條件、Modal 開啟狀態)。

核心 API：History API

// 新增歷史記錄 (不觸發跳轉)
history.pushState(stateObj, title, url);
// 替換當前記錄
history.replaceState(stateObj, title, url);
// 監聽瀏覽器前進/後退
window.addEventListener('popstate', e => {
    const state = e.state; // 取回 pushState 存入的 stateObj
    restoreUI(state);
});

• stateObj：任意可序列化物件 (JSON)，儲存還原 UI 所需資料 (頁碼、篩選條件、滾動位置…)。
• title：目前多數瀏覽器忽略，傳 '' 即可。
• url：新 URL (同源)，可為 ?page=3&sort=desc 形式，支援書籤分享。

完整解決方案架構

1. 狀態序列化與 URL 同步

// 統一狀態結構
interface AppState {
    page: number;
    filters: Record;
    scrollY: number;
    modalId?: string;
}

// 更新 UI 並同步歷史
function navigate(newState: Partial, replace = false) {
    const merged = { ...currentState, ...newState };
    currentState = merged;
    render(merged); // 依狀態渲染

    const url = buildUrl(merged); // 如 /list?page=3&status=active
    const method = replace ? 'replaceState' : 'pushState';
    history[method](merged, '', url);
}

// 監聽 popstate 還原
window.addEventListener('popstate', e => {
    if (e.state) {
        currentState = e.state;
        render(currentState);
    }
});

2. 攔截連結與表單，轉為 AJAX + History

document.body.addEventListener('click', e => {
    const a = e.target.closest('a[data-ajax]');
    if (a) {
        e.preventDefault();
        fetch(a.href)
            .then(r => r.text())
            .then(html => {
                document.getElementById('content').innerHTML = html;
                navigate({ page: getPageFromUrl(a.href) });
            });
    }
});

3. 滾動位置還原

// 離開前記錄
window.addEventListener('beforeunload', () => {
    currentState.scrollY = window.scrollY;
    history.replaceState(currentState, '', location.href);
});

// 還原時恢復
function restoreUI(state) {
    render(state);
    requestAnimationFrame(() => window.scrollTo(0, state.scrollY || 0));
}

進階模式與庫

伺服器端配置關鍵 (SPA 必備)

所有非靜態資源請求皆回傳 index.html，由前端路由接管：

# Nginx
location / {
    try_files $uri $uri/ /index.html;
}

# Apache (.htaccess)
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

# Spring Boot (WebMvcConfigurer)
registry.addViewController("/**").setViewName("forward:/index.html");

測試清單

1. 連續 AJAX 操作 5 步 → 連點 5 次「返回」 → 狀態逐步還原、URL 同步回退。
2. 中間刷新頁面 (F5) → 狀態從 URL 還原、滾動位置復原。
3. 複製 URL 分享給他人 → 開啟即見相同視圖。
4. 開啟 Modal → 按「返回」 → Modal 關閉、背景頁不變。
5. 快速點擊前進/後退 → 無閃爍、無重複請求、狀態一致。

常見坑與對策

總結

「返回鍵」問題本質是應用狀態與瀏覽器歷史不同步。現代解法核心三步：

1. State 即 UI 真相來源：所有視圖變更源於 State 變更。
2. History API 雙向綁定：State → pushState/replaceState；popstate → State。
3. URL 為可分享快照：State 序列化為 Query String，支援書籤、SEO、分享。

善用框架路由 (React Router, Vue Router) 可自動處理 90% 細節；若輕量專案，手寫 HistoryManager 亦非難事。關鍵在於將「狀態管理」提升為架構核心，而非事後補丁。