h5 操作浏览器历史记录的api pushState replaceState 以及 popstate 事件

在history中跳转

使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转。

向前和向后跳转

在history中向后跳转：

window.history.back();

这和用户点击浏览器回退按钮的效果相同。

类似地，你可以向前跳转（如同用户点击了前进按钮）：

window.history.forward();

跳转到 history 中指定的一个点

你可以用 go() 方法载入到会话历史中的某一特定页面， 通过与当前页面相对位置来标志 (当前页面的相对位置标志为0).

向后移动一个页面 (等同于调用 back()):

window.history.go(-1);

向前移动一个页面, 等同于调用了 forward():

window.history.go(1);

类似地，你可以传递参数值2并向前移动2个页面，等等。

您可以通过查看长度属性的值来确定的历史堆栈中页面的数量:

 let numberOfEntries = window.history.length;

popstate 事件

以下皆是在谷歌浏览器中的测试结果

• 单纯用window.location.href = url来导航页面时，并不会触发popstate事件
• 当用window.location.href导航页面，此时通过浏览器的前进、后退或者用api window.history.back(),window.history.forward(),window.history.go(1)也不会触发popstate事件，不过此时是可以正常切换页面文档的（即浏览器地址改变，相应页面文档也会加载）
• 当用pushState向浏览器加入一条记录时，或者replaceState 替换一条记录时，当浏览器地址改变时，才会涉及到触发popstate事件

例如

A.html, B.html, C.html三个页面，且三个页面都监听了popstate事件，此时在A页面 通过window.history.pushState(null, null, './B.html'),向浏览器push一条历史记录，会发现，此时，浏览器地址改变为B.html,但是文档内容还是A.html.如果想让文档内容也是B.html还需要刷新一下或者调用api window.location.reload()或 window.history.go(0)刷新页面，如不执行刷新重载操作，pushState,replaceState 只是会改变浏览器的历史记录，不会载入文档页面，vue的单页面也是利用了此api不刷新页面的操作，利用js显示隐藏元素。

目前个人使用方案

• 在传统多页面的跳转，可以在每个页面都监听popstate事件，当地址改变时，调用window.location.reload()

• 在页面跳转用window.history.pushState(null, null, url),然后执行window.history.go(0)主动刷新

• 通过这种方式做多页面跳转时，通过浏览器的前进、后退或者用api window.history.back(),window.history.forward(),window.history.go(1)都可以正常运行，且可以触发popstate事件。

• 当然也可以用之前的window.location.href = url来做跳转，然后用浏览器的前进、后退或者用api window.history.back(),window.history.forward(),window.history.go(1)也可以正常运行，只不过不触发popstate事件。