Ajax 書籤與瀏覽器前進後退按鈕處理方案：RSH 框架實戰指南

問題本質

傳統多頁應用天然支援書籤與歷史導航。單頁 Ajax 應用僅在單一 URL 內動態更新狀態，導致：

• 地址列不變，無法收藏特定狀態。
• 使用者按「後退」鍵會離開整個應用，而非撤銷上一步操作。

Really Simple History (RSH) 解決方案

開源輕量級 JavaScript 庫，提供 DHtmlHistory 與 HistoryStorage 兩大核心類，解決書籤與歷史導航問題。支援 Firefox 1.0+、IE 6+、Netscape 7+ (不支援 Safari)。

核心機制

1. 隱藏表單快取：利用瀏覽器自動保存表單欄位值特性，在頁面卸載前持久化任意客戶端狀態資料。
2. 隱藏 IFrame + 錨點：IE 透過 IFrame 記錄歷史；現代瀏覽器監聽 location.hash 變化。統一抽象為歷史事件模型。

快速上手範例

<!-- 頁面需引入 -->
<script src="dHtmlHistory.js"></script>
<!-- 同目錄需放置 blank.html 供 IE IFrame 使用 -->

<script>
// 初始化
window.onload = function() {
  dHtmlHistory.initialize();
  dHtmlHistory.addListener(historyChanged);
  if (dHtmlHistory.isFirstLoad()) {
    dHtmlHistory.add('home', {view: 'welcome'});
  }
};

function historyChanged(newLocation, historyData) {
  // 根據 newLocation 還原 UI 狀態
  switch (newLocation) {
    case 'home': showWelcome(); break;
    case 'edit': loadEditor(historyData); break;
    // ...
  }
}

// 使用者操作觸發狀態變更
function onEditClick(docId) {
  dHtmlHistory.add('edit', {docId: docId, timestamp: Date.now()});
  loadEditor({docId: docId});
}
</script>

關鍵 API 說明

注意事項

• historyData 不隨書籤持久化，瀏覽器關閉或清除歷史即失效。
• 不可儲存 DOM 節點、XMLHttpRequest 等非序列化物件。
• RSH 為單一模組，易整合既有 Ajax 架構，未來版本將避免與 Dojo、Backbase 等框架衝突。

結語

RSH 以極簡 API 解決 Ajax 最大易用性缺憾，讓單頁應用擁有原生 Web 的導航體驗。建議納入專案基礎設施，提升產品專業度。