回到上一頁 - AJAX 的難題

by thinker

關鍵字:

對於 $AJAX$ 為基礎的 $WEB$ Application 而言，回到上一頁 back button 正是打到痛處。因為，高度使用 $AJAX$ 技術的 $WEB$ Application ，根本沒有上一頁 :p

但是 gmail 做到了，它有回到上一頁。如果你仔細觀查 back button 的 history， 你會發覺，history 裡面永遠只有兩筆 gmail 的記錄。如果你再用 $Firefox$ 仔細看一下 gmail 的 DOM tree ，你會看到許多的 frame。

我不知道 gmail 實際上怎麼做，也不想去追他的 $javascript$ 。但從這裡，我聽到上天傳來的一道神諭。我們可以有 A、B 兩兩個 frame，分別 load page_a 和 page_b ，page_b 會向 page_a 詢問一個 $URL$ ，並在 frame B  ， load 該 $URL$。

於是，每當按 back button 時，frame B 會回到 page_b ，再次問 page_a 下一個 $URL$ ，並立即 load 該 $URL$ 。於是，我們可以在 page_a 維持一個 list ，記錄所有 surf 的 history ，以模擬 back button 的功能。

這樣的模擬有一個缺點，不能 support forward button。要模擬 forward ， 只要如法泡製，frame B 從 page_b 開始，被要求 load page_c ，page_c 再自動 load page_d 。接著 page_d 會自己 backward 回 page_c  ，這中間的過程，都會在 page_a 記錄其狀態。最後 frame B 會停在 page_c  。而且，此時 backward 會回到 page_b ，forward 會到 page_d 。有這兩頁的守護， page_b 和 page_d 永遠會 forward 或 backward 回到 page_c ，而且會將過程記錄在 page_a。透過在 page_a 的狀態記錄，我們就可以控制 frame B 所顯示的內容。每次 page_c onload event 被 trigger 時，就向 page_a 要求一個 $URL$ ，透過 $AJAX$ 的技巧，將其內容 show 在頁面上。每當 page_c 變換頁面內容時，也要先 page_a 登記，將其記錄在 history 的記錄裡。

這樣的摸擬，雖然有點複雜，但卻可寫成 $javascript$ library ，重複使用。

最後更新時間: 2007-02-06 02:54:07 CST | 引用

查詢:

COMMENTS:

on 2007-02-09 23:22:11 CST

遊手好閒的石頭成 said ..

現在瀏覽器只著重頁面元件的事件，少了瀏覽器本身的事件。如果有 window.onback 事件可捕捉，或許就沒這麼麻煩了。

on 2007-02-10 01:25:57 CST

Thinker said ..

WEB browser 有太多如果了，如果 IE 也支援 XUL ，讓 XUL 成為標準，也就沒這麼多如果了 :p