實現AJAX下的瀏覽器 前進按鈕/後退按鈕，詳解

本文轉自：http://hi.baidu.com/my534/blog/item/45c6bdcadf628a82c81768e3.html

檔案下載下載本文所用例子         在AJAX技術如此火爆的今天，關於AJAX的程式破壞瀏覽器的“前進/後退”的問題一直像只蒼蠅一樣困擾著許多AJAX的初學者，當你去百度或是 google中搜尋相關資訊的時候，你會發現討論此問題的文章很多，但是大多都是只給了個解決思路，或是長篇大論的深刻研究，很難找到實際的相關解決方案 的例子，於是我有了寫這篇文章的想法，並提供一個小例子下載，希望對喜歡AJAX技術的同仁們有所協助！         我們要解決AJAX程式中的瀏覽器的“前進/後退”問題其實在根本上是要解決如何讓瀏覽器記錄每次用戶端事件的執行結果， 在AJAX的技術沒有像現在大紅大紫的時候，也沒有人去討論如何讓瀏覽器記錄影javascript這樣的用戶端指令碼每次的執行結果，也正是由於AJAX 的興起，讓javascript這樣的用戶端指令碼語言如今承擔著前所未有的重要角色，也吸引了更多的技術人員去研究它，呵呵，有點兒跑題了。再次重複一下 兒，AJAX程式中的瀏覽器的“前進/後退”問題其實在根本上是要解決如何讓瀏覽器記錄每次用戶端事件的執行結果，因為之前你用AJAX的方式得到的結果，你最終還是需要將這個結果用純粹用戶端的方式更新到頁面中，你想讓瀏覽器記錄在案的其實也就是你最後的將結果更新到頁面中的這一步，至於這前到底發生了什麼，結果是否是AJAX的方式得來的這些問題對於我們來說都沒有任何意義。         目前實現此功能的方法大至上有兩種比較流行的做法，一種是我們今天要講到的利用頁面中的一個隱藏的iframe去實現，另一種則是利用URL中動態改變 其中的參數讓瀏覽器記錄在案，由於各種瀏覽器對於URL的改變記錄的程度不同，個人感覺不如第一種方式方便，暫不介紹。         好了，開始真正的步入正題吧，我們現在要實現一個能讓瀏覽器記住我們每一次用戶端事件執行結果的例子，通過之前的分析，相信大家容易能將此例子應用於AJAX程式中。         先看一下兒程式運行後的結果！            上一篇文章的例子中我們看到了每次點擊按紐後數位變化都被瀏覽器準確記錄，並點擊瀏覽器上的“前進/後退”按紐可查看之前每次點擊後的數字。本篇文章將向大家詳細說明實現的原理。 首先大家要明白的一點的瀏覽器的“前進/後退”的功能不是“死板”的只會改變當前頁的URL，在頁面中有iframe存在時，iframe地址的改 變也會被瀏覽器非常人性化的記錄在案，在我們對於iframe的地址動態改變後，點擊瀏覽器上的“前進/後退”按紐時會非常人性化的保持父頁面不動的情 況下改變iframe的瀏覽曆史！這就是我們實現記錄用戶端操作結果的關鍵所在。上一篇文章中展現的例子，我們在頁面中加入了一個隱藏的iframe，在 點擊按紐讓數字加一的同時，將當前頁面的內容存於一個數組中並有規律的改變了iframe中連結地址中的參數，讓瀏覽器記錄下了iframe連結地址即 URL的變化，這樣就完成記錄操作曆史的過程。當使用者點擊了瀏覽器上的“前進/後退”功能按紐時，父頁面不發生化，但會改變iframe的URL，在 iframe所連結的頁面中，每次重新讀取頁面都會導致運行一段javascript程式，程式的功能根據當前URL中的參數去調用父頁面的一個用於記取 曆史的方法，方法的功能就是根據iframe中傳遞過來的參數去返回用來記錄頁面資訊的數組中相應的曆史頁面資訊。這種程式實現的大致思路。 下面詳細解釋一下兒代碼： 父頁面中主要javascript代碼： 程式碼<script> var h_list=new Array(10);//聲明用來儲存頁面曆史資訊的數組（最大記錄10次曆史操作） var h_index=0;//聲明用來指定當前瀏覽歷程記錄的指標 //儲存記錄方法 function saveHistory() {     if(document.getElementById('hisStoryFrame'))     { if(h_index==9) {    h_index=0; }else{    h_index++; } h_list[h_index]=document.getElementById("info").innerHTML; document.getElementById('hisStoryFrame').src='history.htm?'+h_index; }      } //讀取記錄的方法 function getHisStory(curIndex) { if(curIndex!=h_index) { if(h_list[curIndex]) {        h_index=curIndex;        document.getElementById("info").innerHTML=h_list[curIndex];     } } } //按紐點擊後啟動並執行方法， function test() { 　//用於改變頁面資訊，你可將其換為ajax的操作     document.getElementById('info').innerHTML=(parseInt(document.getElementById('info').innerHTML)+1);         //之前的操作成功後記錄曆史     saveHistory(); } </script> 以上就是在實現“前進/後退”功能主要用到的方法。 當然，不要忘了在父頁面的還要在底部加入以下一段程式 程式碼<script> h_list[0]=document.getElementById("info").innerHTML; </script> 此段程式的意思是將頁面剛開啟時頁面的資訊存入數組中的第０處，這樣子就能保證在使用者第一次點擊後就能按“後退”按紐回到頁面第一次開啟的狀態。 頁面隱藏的iframe在父頁面中要如下聲明：程式碼<iframe id="hisStoryFrame" src="history.htm?0" height="0px" frameborder="no"></iframe> height="0px" frameborder="no"　這兩個屬性保證了iframe在頁面中不可見，而src的屬性設為"history.htm?0"，注意"?0"將頁 面初始參數便定為0,這樣子在根據"?"後的參數讀取曆史時就能讀取到最初頁面開啟時的狀態。 iframe指向的頁面history.htm中的代碼則很簡單：程式碼<script> var url=window.location.href; if(url.indexOf('?')>-1) {    parent.getHisStory(url.substr(url.indexOf('?')+1));    document.write(window.location.search.substr(1)); } </script> 只是每次讀取頁面時根據URL中的"?"後的數字去調用父頁面中的getHisStory方法，恢複在數組中相應的曆史頁面資訊。 　　　這就是實現整個功能的全過程及代碼，講得比較粗糙，但代碼還是很實用的，我的blog系統(http://www.zj-blog.com/)大量採用的AJAX的方式讀取資訊，但還是可以使用瀏覽器的“前進/後退”功能，其背後的原理也就是這個例子中的代碼，大家如果看文章不是太明白的話可以下載本文使用的例子去研究。希望大家以後做的AJAX程式都能實現瀏覽器的“前進/後退”功能！ 檔案下載