JavaScript（16）

四、窗口历史

平常在使用浏览器当中，我们都会经常使用浏览器中的“前进”和“后退”。其实浏览器都会帮我们保存浏览的历史（即窗口历史）。那么在JavaScript中，我们该如何来操作这些窗口历史呢？

在JavaScript中，我们使用window对象中的history对象进行访问窗口历史。很多人对“window对象中的history对象”这一句不太理解，其实“对象里面也可以有子对象”的。看过JSON教程的读者都知道，我们可以在一个对象里面再定义一个子对象。

我们在JavaScript进阶教程的“JavaScript对象”这一节再详细为大家探讨。

既然提到对象，那肯定少不了还是按照“对象的属性”和“对象的方法”这两个套路来给大家讲解了。

1、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>

由于窗口历史必须在实际环境才会有效，即使提供在线测试也不会有效果，请大家自行在本地测试。