如何在 pushState 后按下后退按钮时重新加载页面？

Question

如何在 pushState 后按下后退按钮时重新加载页面？

jqueryajaxpushstate

8

我目前正在使用Code Igniter来创建美观的URL，并且有一个系统，基本上使用ajax让你可以搜索健身房。

在加载健身房列表后，我使用push state来更新URL，例如：

example.com/list/search_key/pagination-page/sort-by/filters~seperated~by~that

其中search_key是他们想要搜索健身房的城市、州或社区，filters是单独的复选框。

发送数据时，我使用.ajax将搜索关键字和每个单独的checkbox值（1或0）通过post发送。然后，Code Igniter使用POST数据和PHP生成上述URL。 ajax成功后，推状态将URL设置为PHP生成的URL。

问题是，如果您使用分页进入第2页，并且要返回第1页，那么自然会使用浏览器的后退按钮。问题是，它只将URL地址栏返回到当前URL之前的URL，它实际上不会更改页面内容。我需要它使用旧（先前的）URL重新加载页面，或者刷新页面。

我甚至可以使用ajax使用URL数据重新提交表单，但我不知道如何做到这一点。

我尝试过一些方法，但完全没有作用。基本上，我尝试了谷歌的第一页上的所有东西，一切都看起来很有希望，但实际上什么也没做到。

如果pushstate URL更改为以前的URL，有没有刷新页面的方法？

PS：以下是我尝试过的一些关键事项。

<script type="text/javascript">
$(window).unload(function(e){
   e.preventDefault();
   alert("Back was pressed!");
});
// If this wouldve worked, it wouldve atleast alerted me that.

// The code off this URL: http://www.mrc-productivity.com/techblog/?p=1235

// Some of the codes off this URL: http://forum.jquery.com/topic/howto-force-page-reload-refresh-of-previous-page-when-back-button-is-pressed

// A few others.
</script>

- David Lawrence

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek Hunziker · Accepted Answer

由于您是从ajax success方法中推送状态，因此可以使用window.onpopstate方法检测回退按钮。

请注意，只调用history.pushState()或history.replaceState()不会触发popstate事件。只有通过执行浏览器操作（例如单击后退按钮（或在JavaScript中调用history.back()））才会触发popstate事件。

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

window.onpopstate = function(event) {
    if(event && event.state) {
        // event.state.foo
    }
}