如何处理网页的历史记录？

Question

这是我所拥有的

<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">

因此，在我的jsp文件中，我使用javascript和jQuery动态地处理了这两个div的内容。 例如，如果我单击changeA ，则函数createTableA()将动态操作<div id=A></div> append表append到表中。 所以我的问题是，如果我单击changeA ，然后单击changeB ，如何处理历史记录，以便如果单击back按钮，我将返回Table A的内容。

Answer 1

我一直在使用jQuery History插件来处理这类事情，并且对我来说一直很好。

每个“页面”都由您的URL中的哈希引用。 这样，“更改页面”不会刷新页面，但是会将页面状态存储在历史记录中并允许添加书签。

编辑我将在链接中给出的示例上进行扩展，以更适合您的情况。

function loadTable(hash)
{
    if(hash == "ChangeA")
        createTableA();
    if(hash == "ChangeB")
        createTableB();
}
$(document).ready(function() {
    $.history.init(loadTable);
    $("input[id^='Change']").click(function(){
        $.history.load(this.attr('value'));
        return false;
    });
});

上面的代码所做的是在所有id为'Change'开头的input标签上设置一个事件处理程序，以便在单击这些按钮时调用loadTable。 如果将按钮更改为如下所示：

<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">

单击按钮A会将此http://www.example.com/yourpage.html#ChangeA放在地址栏中并加载表A，还将表更改添加到浏览器历史记录中。

Answer 2

本地“位置”对象具有“散列”属性，可用于在AJAX / JS应用程序中进行导航。

您可以使用历史记录插件或地址插件 。

地址插件可提供更大的灵活性，建议用于更复杂的应用程序。

Answer 3

您应该查看Ben Alman的“后退按钮”和“查询库”伟大的api，以了解浏览器的历史记录，并提供一些出色的示例来帮助您入门。

Answer 4

YUI还具有浏览器历史记录管理器：YUI3： http : //developer.yahoo.com/yui/3/history/或YUI 2： http : //developer.yahoo.com/yui/history/