HTML5历史记录API：刷新和后退问题

Question

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

1. 在时间线上查看照片，单击后以模态窗口形式打开。
2. 刷新页面后进入专门显示该图片的页面。
3. 点击“返回”按钮可以返回到时间线页面。

通过 HTML5 历史记录 API，我已经基本实现了这个功能。以下是单击图像时我的操作：

1. 使用 preventDefault() 防止链接（到图片页面）跳转，而是 AJAX 加载带有图像的模态框。
2. pushState 图片页面的 URI，使其出现在地址栏中。
3. 刷新页面后直接进入专用的图片页面（从第2步获得的 URI）。
4. 然后，点击“返回”按钮，它会在地址栏中显示先前页面的 URI（即时间线），但我仍然停留在图片页面上。

问题：在第4步中，是否有一种方法可以绕过历史记录 API 并使浏览器执行标准的“返回”操作，以便可以返回到以前的页面（即时间线）？

- wdm

---

或许在加载模态框前先使用 pushState？ - gengkev

我猜你应该这样做，就是监听onpopstate事件。 - gengkev

我实际上会先调用preventDefault()方法，然后是pushState和Ajax调用。如果我在Ajax之前或在成功回调中先调用pushState，同样的问题也会出现。 - wdm

它能在不刷新页面的情况下工作吗（您是否已经实现了onpopstate）？ - gengkev

如果我从时间轴上点击照片，模态框会打开，然后我点击“返回”，它会按预期返回到时间轴。 - wdm

Answer 1

我是这样做的： 步骤1 - 保存初始页面的URL（尚未更改）。

var savedPageStateURL = window.location.pathname;

步骤2 - 替换当前历史状态（不是推送，只是替换）

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

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

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

- vsync

Answer 2

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

- chrx

---

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

@wdm - 你肯定是指 history.state。 - vsync