利用 html的錨點（元素a）功能實現ajax單頁面應用的瀏覽器后退前進功能

一、問題

隨着AJax技術的普及，單頁面web程序的應用越來越廣泛。

所謂單頁面應用程序，簡單的說，就是應用只有一個主網頁，第一次加載后，后續頁面只會利用js和ajax到服務器獲取數據進行頁面的局部刷新。

因為實際一直只有一個頁面，雖然看上去頁面經常發生變化（比如點了一個鏈接或按鈕），但無法利用瀏覽器工具欄上的倒退、前進按鈕進行操作。

這個會導致一些不便。

而html的a標簽的 href屬性可以設置 #錨點，來支持瀏覽器的倒退、前進。 下面我們就利用這屬性來進行處理。

二、解決

我們來通過例子說明：

假設應用的主網頁為 xxxurl ， 頁面的頂部有兩個鏈接（相當於導航）

<a>主頁</a>  

<a>設置</a>

<div id="home">主頁的內容</a>

<div id="set">設置的內容</a>

頁面初始啟動時，會顯示主頁對應的內容，id為home的div區域會顯示，id為 set的區域會隱藏。

當點擊“設置”鏈接時，希望id為home的div區域會隱藏，id為 set的區域會顯示，同時也會觸發ajax事件來從服務器獲取數據更新id為 set的區域的內容。

同樣當點擊“主頁”鏈接時，希望id為home的div區域會顯示，id為 set的區域會隱藏。

下面我們看看怎么實現：

我們來給鏈接增加錨點，代碼如：

<a href="#">主頁</a>  

<a href="#set">設置</a>

我們編寫js代碼，首先要在頁面的啟動事件中增加如下代碼，這是關鍵：

window.onhashchange=hashChange;   //當網頁的錨點發生變化時，會觸發onhashchange事件，從而調用hashChange方法

編寫hashChange方法，在該方法中利用js操作，進行頁面的更新和數據的刷新。

function hashChange(){
    if(!location.hash || location.hash=="#"){
         //通過css的控制，讓id為home的div區域會顯示，id為 set的區域會隱藏

　　  // 也可在這里利用ajax到服務器獲取數據，更新頁面
    }
    else if(location.hash=="#set"){
        //通過css的控制，讓id為set的div區域會顯示，id為 home的區域會隱藏

　　  // 也可在這里利用ajax到服務器獲取數據，更新頁面
    }
}

另外因為頁面啟動時，不會觸發onhashchange事件，也需要自己在頁面啟動事件中主動調用下hashChange方法。

后續當點擊鏈接時，或者操作瀏覽器上的前進、后退按鈕時，會觸發onhashchange事件。

這樣，我們通過這種方式就解決了文章開頭提到的問題。

三、補充說明

需要補充下的時，html5增加了一個新的特性，引入了histtory.pushState()和history.replaceState()這兩個方法，通過他們也可以實現類似的功能，這個有興趣的可自行研究。

如果是簡單的應用，利用標簽a的錨點特性就可以達到相應的目的，並且簡單易懂。復雜的應用，可以考慮利用html5的新特性。