DIV CSS 佈局教程網

平常在使用浏覽器當中，我們都會經常使用浏覽器中的“前進”和“後退”。其實浏覽器都會幫我們保存浏覽的歷史（即窗口歷史）。那麼在JavaScript中，我們該如何來操作這些窗口歷史呢？

在JavaScript中，我們使用window對象中的history對象進行訪問窗口歷史。很多人對“window對象中的history對象”這一句不太理解，其實“對象裡面也可以有子對象”的。看過JSON教程的讀者都知道，我們可以在一個對象裡面再定義一個子對象。

我們在JavaScript進階教程的“JavaScript對象”這一節再詳細為大家探討。

既然提到對象，那肯定少不了還是按照“對象的屬性”和“對象的方法”這兩個套路來給大家講解了。

一、history對象屬性

在JavaScript中，hisotry對象常用的屬性如下：

history對象屬性 屬性 說明 current 當前窗口的URL next 歷史列表中的下一個URL previous 歷史列表中的前一個URL length 歷史列表的長度，用於判斷列表中的入口數目

這些history對象屬性比較少用，大家看一下就可以了。

2、history對象方法

在JavaScript中，hisotry對象常用的方法如下：

history對象方法 方法 說明 go() 進入指定的網頁 back() 返回上一頁 forward() 進入下一頁

我們常見的“上一頁”與“下一頁”實現代碼如下：

語法：

 
<a href="javascript:window.history.forward();">下一頁</a>
<a href="javascript:window.history.back();">上一頁</a>

注意一下，這種“上一頁”與“下一頁”是針對浏覽器歷史記錄而言，不能用來制作類似 學習網那種分頁特效。兩者是完全不同的概念！

分頁效果

當然，我們還可以使用hisotry.go()方法指定要訪問的歷史記錄。若參數為正數，則向前移動；若參數為負數，則向後移動，例如：

 
<a href="javascript:window.history.go(-1);">向後退1次</a>
<a href="javascript:window.history.back(2);">向後前進2次</a>

使用history.length屬性能夠訪問history數組的長度，可以很容易地轉移到列表的末尾，例如：

 
<a href="javascript:window.history.length-1;">末尾</a>

在JavaScript中，操作窗口歷史語法很簡單，也不是那麼常用。一般情況下，在404頁面中，為了用戶體驗，往往會有一個提供“返回上一頁”的選項，這其中就用到了下面這種語法：

 
<a href="javascript:window.history.go(-1);">返回上一頁</a>

由於窗口歷史必須在實際環境才會有效，即使提供在線測試也不會有效果，請大家自行在本地測試。