如何在pushState之后按下后重新加载页面?

时间:2012-07-30 22:38:38

标签: jquery ajax pushstate

我目前正在使用Code Igniter拥有漂亮的网址,我有这个系统基本上使用ajax来搜索健身房。

我在加载健身房列表后使用推送状态,如下所示:

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

其中search_key是他们想要搜索健身房的区域中的城市,州或社区,过滤器是单独的复选框。

会发生什么,我使用.ajax通过post发送搜索关键字和每个单独的复选框值(1或0),然后代码点火器使用POST数据和PHP,生成如上所示的URL。 ajax成功push将URL指定为PHP生成的URL。

问题是,如果你使用say分页转到第2页,并且你想转到第1页,你自然会使用浏览器后退按钮。问题是,它只在网址之前将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>

1 个答案:

答案 0 :(得分:15)

由于您是从ajax成功方法推送状态,因此可以使用window.onpopstate方法检测后退按钮。

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

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

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