使用pushState()/ onpopstate时,页面不会通过'back'重新加载

Dav*_*ard 17 javascript html5 pushstate

我正在使用AJAX刷新一些页面,因此使用以下代码更新历史记录 -

/** Update the page history */
var pushState_object = {
    ajax_string: ajax_string,
    security: security,
};
window.history.pushState(pushState_object, title, permalink);
Run Code Online (Sandbox Code Playgroud)

然后我在页面加载时调用这个onPopState函数 -

window.onpopstate = function(e){
    if(window.history.state !== null){
        initiate_load_updated_page(window.history.state.ajax_string, window.history.state.security, 0)
    }
}
Run Code Online (Sandbox Code Playgroud)

虽然在从通过AJAX生成内容的页面转到以通常方式加载的页面时使用后退按钮,但我遇到了一些问题.URL将更改,但页面将不会重新加载.再次点击返回会带我到页面,正如我所料,然后前进工作正常 - 这只是后退按钮不起作用的一种情况.

这里的任何建议将不胜感激.

pim*_*vdb 17

初始状态没有.state可用属性,因为您没有使用.pushState添加此类数据(它是按照您描述的正常方式加载的).

但你知道的是,如果没有.state,它必须是原始状态,所以你可以使用这样的else块:http://jsfiddle.net/pimvdb/CCgDn/1/.

最后,你可以使用e.state.

window.onpopstate = function(e){
    if(e.state !== null) { // state data available
        // load the page using state data
        initiate_load_updated_page(e.state.ajax_string, window.history.state.security, 0);

    } else { // no state data available
        // load initial page which was there at first page load
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 在上面的解决方案中,如果其他人都在苦苦挣扎,只需将initiate_load_updated_pa​​ge行更改为location.reload(); 谢谢. (5认同)