Question

我正在创建一个脚本，用于收听浏览器后退按钮并加载上一页。我是jquery和javascript（一个php人）的新手。在重新发明之前，我已经在整个网络上搜索了一个库。但是因为我在ajax链接中使用了很多参数，所以我无法使用这些库。我承认我的错误，因为我不知道如何使用这种复杂的系统。所以我在想如果创建一个系统如下。

// get the contents of a particular div and save as an object/associative array 
// { hash : pageNumber, html : content}
function save_history(div){
    var content = $(div).html();
    // increment the page number and add hash tags to the URL
}   

// Listen to the browser hash value change
$(window).bind('hashchange', function () {
    hash = window.location.hash;
    if(hashValue){
        load_history(hashValue);
    }   
}); 

// Load data from history
function load_history(id){
    // fetch the content based on the hashvalue
    $(div).html(content);
}

使用它有什么问题吗？当许多内容被保存为对象时，这会使页面无响应或崩溃浏览器吗？如果引起这样的问题，我不想浪费我的时间。

Answer 1

似乎pjax是您正在寻找的库：https://github.com/defunkt/jquery-pjax

Answer 2

如果您打算使用HTML5，请查看历史记录API。它允许在AJAX Web Apps上使用本机浏览器控件。看看吧！

http://diveintohtml5.info/history.html

Answer 3

历史API是最佳选择。如果您的页面是使用大量参数创建的，则无关紧要 - 如果通过URL参数跟踪它们，则更新历史记录（更新URL）应恢复页面状态。如果您没有使用URL参数（即您正在使用POST或某些自定义解决方案），则history.pushState（）接受三个参数：state，可以是任何对象（例如，表单数据的序列化），然后标题，然后是“新”页面的URL。然后，当您回击时，执行history.popState（），它返回所有相同的参数，然后您可以解析这些参数以恢复页面的“上一个”状态。

说真的，请仔细阅读howderek链接的文章，或查看与使用历史记录API的许多其他教程相关的其他问题：Good tutorial for using HTML5 History API (Pushstate?)

使用ajax时将浏览器返回按钮，并将html数据保存为对象。是好是坏？

3 个答案: