HTML 历史项接口

浏览器窗口有一个history对象，用来保存浏览历史。提供了如下接口用来操作历史项：

back() ：后退，相当于点击后退按钮

forward()： 前进，相当于点击前进按钮

go(n)： 移动到指定页面 -- n是一个相对位置

go(-1) ：相当于后退

go(0)：相当于刷新当前页面

HTML5 为history对象添加了两个新方法，history.pushState()和history.replaceState()用来在浏览历史中添加和修改记录。

history.pushState有3个参数.

state: 与指定网址相关的状态对象，history.state显示的就是通过state指定的对象。可以设置为null。

title: 新页面的标题。

url: 新的网址，必须与当前页面处在同一个域。

使用pushState不会导致页面刷新。假定当前网址是history.html，我们使用pushState在浏览记录中添加一个新记录：

 var stateObj = { page: "page 2" };history.pushState(stateObj, "page 2", "page2.html");

添加这个记录之后浏览器地址栏立刻显示localhost/history/page2.html，但页面内容没有发生变化，不会跳转到page2.html，甚至不会检查page2.html是否存在，它只是成为浏览历史中的最新记录（但如果这时候点击刷新，就会去访问page2.html）。点击后退按钮，页面的url将显示为localhost/history/history.html，但内容还是原来的history.html。

 history.replaceState

参数与pushState相同，区别在于它是修改当前页面的值。

 

popState事件

每当同一个文档的浏览历史出现变化时，就会触发popstate事件。不同的浏览器可能定义不一样（测试后才能确定）。当页面第一次加载的时候，在onload事件发生后，Chrome和Safari浏览器会触发popState事件（ps: 经测试， chrome v39不会触发）。点击前进/后退的时候会触发，chrome会触发popState事件。