Question

我正在尝试实施HTML5 history feature来执行页面内容的AJAX加载。到目前为止，我的JS看起来像这样：

// saving current page to history
var current_url = "page1"    
var page_content1 = $('body').html();
history.pushState({page_content: page_content}, current_url, current_url);

// loading new page with AJAX
var new_url="page2"
$.getJSON(new_url,get_data,function(data){
    $('body').html(data.page_content);

    var page_content2 = $('body').html();
    history.pushState({page_content: page_content2}, new_url, new_url);
});

- 确定：执行JS时，“page2”的内容通过AJAX正确加载到body，浏览器URL从“page1”更改到“page2”。
- 确定：当我点击previous浏览器按钮时，浏览器URL将从“page2”更改回“page1”
- 不行：但是，当我点击previous浏览器按钮时，页面内容不会更改为以前用于“page1”的内容。

问：我应该为上一个/下一个浏览器按钮绑定哪些事件，以及在按下这些按钮后我应该使用history方法来检索状态数据？

Answer 1

我最终使用依赖于window 'statechange'事件的history.js来处理与浏览器previous/next按钮的互动，并使用getState()方法来检索状态数据

Answer 2

window.onpopstate = function (e) {
    if (e.state) {
        // Work with state object here
    }
}

请注意，如果您希望用户访问的初始页面在导航回来时正确加载，则您需要在初始页面加载期间使用history.replaceState（）来加载该页面的状态。

另请注意，已有许多jQuery插件可以执行此操作。他们中的一些甚至尝试支持IE（使用iframe）。在自己重新发明之前，您可能想尝试一些现有的解决方案。

单击浏览器上一个/下一个按钮时重新使用HTML历史记录状态

2 个答案: