HTML5 History

History

History API是HTML5新加入的API。

可以在不刷新页面的前提下动态改变浏览器地址栏中的URL地址，动态修改页面上所显示资源。

API

//返回
window.history.back()
window.history.go(-1)

//向前跳转
window.history.forward()
window.history.go(1)

//历史记录中页面总数
history.length

pushState

//添加一条历史记录，不刷新页面(浏览器没有刷新加载，只是更改浏览器地址栏地址)
history.pushState(state, title, url); 

• state: 一个于指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以填null
• title: 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
• url: 新的网址，必须与前页面处在同一个域。浏览器的地址栏将显示这个网址。

应用

1.添加hash值，页面只局部加载

//index.html
history.pushState(null, null,'#one')

replaceState

//替换当前的历史记录，不刷新页面
history.replaceState(state, title, url);

url: www.baidu.com
history.replaceState(null, '12', '/test');
url: www.baidu.com/test

事件

popstate 历史记录发生改变时触发，调用history.pushState()或者history.replaceState()不会触发popstate事件

hashchange 当页面的hash值改变的时候触发，常用于构建单页面应用。