HTML5 History API：刷新和返回问题答案

【问题标题】：HTML5 History API: Refresh and Back issuesHTML5 History API：刷新和返回问题
【发布时间】：2013-04-04 07:14:48
【问题描述】：

我正在编写代码来创建类似于从时间线在 Facebook 上查看照片的用户体验...

我通过 HTML5 History API 完成了大部分工作。这是单击图像时我正在做的事情...

问题：在第 4 步，有没有办法绕过历史 API，让浏览器执行标准的“返回”操作，这样我就可以返回到上一页（即时间线)?

【问题讨论】：

加载模态之前可能是 pushState？
我猜你应该这样做是听 onpopstate
我实际上触发了preventDefault() 然后pushState 然后是Ajax 调用。如果我在 Ajax 之前或在成功回调中触发 pushState，也会出现同样的问题。
在不刷新页面的情况下是否可以工作（你实现了onpopstate）？
如果我从模式打开的时间线中单击照片，然后我回击，它会按预期返回到时间线。

【解决方案1】：

你尝试过一个很好的老式history.go(-1); 吗？

【讨论】：

我在刷新时读取History.getState() 数据以检测模态数据是否存在，如果存在则使用History.go(-1) 但它使我返回到所需页面之前的页面。
@wdm - 你肯定是说history.state

【解决方案2】：

我是这样做的：

第 1 步 - 保存初始页面 url（尚未更改）

var savedPageStateURL = window.location.pathname;

第 2 步 - 替换当前历史状态（不推送，仅替换）

window.history.replaceState( {}, null , url );

第 3 步 - 恢复历史更改并返回到第一步的状态

if( 'pushState' in window.history && window.history.state )
    window.history.replaceState( {}, null , savedPageStateURL );

【讨论】：