9

我正在创建一个脚本来监听浏览器后退按钮并加载上一页。我是 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);
}

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

4

3 回答 3

2

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

于 2012-09-15T22:21:55.010 回答
0

如果您打算使用 HTML5，请查看 History API。它允许在 AJAX Web 应用程序上使用本机浏览器控件。看一看！

http://diveintohtml5.info/history.html

于 2012-09-10T21:53:26.060 回答
0

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

说真的，阅读文章 howderek 链接到更紧密，或者查看这个其他问题，它链接到许多其他关于使用历史 API 的教程：使用 HTML5 历史 API 的好教程（Pushstate？）

于 2012-09-14T16:15:33.363 回答