history是window对象的属性,它保存着用户上网的历史记录,出于安全方面的考虑,开发人员无法得知用户浏览过的URL。不过,借助用户访问过的页面列表,同样可以在不知道实际URL的情况下实现后退和前进。
一、HTML5出现 之前的 history
history有如下方法:
- history.go()
- history.forward()
- history.back()
if ( history.length == 0 ) {
//这是用户打开浏览器窗口后的第一个页面
}
二、HTML5出现后的history
在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此“后退”和“前进”按钮也就失去了作用。HTML5通过更新history对象为管理历史状态提供了方便。
1.hashchange 事件
HTML5新增了 hashchange 事件,以便在URL的参数列表发生变化时通知开发人员。之所以新增这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数来保存状态或导航信息(这也说明Ajax的缺点之一就是无法保存状态和导航信息)。hashchange事件需要挂载到window对象上,部分浏览器支持 event 对象上的 oldURL 和 newURL 属性,它俩分别保存着参数列表发生变化前后的完整URL。但是,为了不产生兼容性问题,尽量使用 location 对象来确定当前的参数列表。
2.状态管理 API
说三点:
- pushState() 方法
- popstate 事件
- replaceState() 方法
除了增加了事件,HTML5还新增了状态管理 API,能够在不加载新页面的情况下改变浏览器的 URL 。为此,需要使用 history.pushState() 方法,接收三个参数:状态对象、新状态的标题和可选的相对URL。例如:
history.pushState( {name : "ghostlpx"}, "", "ghostlpx.html" );
执行 pushState() 方法后,新的状态信息被加入历史状态栈,URL得到更新。但是,浏览器并不会真的向服务器发送请求。另外,第二个参数可以为空字符串或者一个短标题。第一个参数要提供初始化页面状态所需的各种信息,所以是对象形式。
因为 pushState() 会创建新的历史状态,所以你会发现“后退”按钮也能使用了。按下“后退”按钮,会触发 window 对象的 popstate 事件。popstate 事件的 event 对象有一个 state 属性,它包含着前一个 URL 状态对象。
要更新当前状态,可以调用 replaceState() ,传入的参数与 pushState() 的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态,只会重写当前状态。