java - 如何操作网页的历史记录？

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一张 table 。所以我的问题是我是否点击changeA ，然后单击 changeB ，如何操作历史记录，以便如果我单击 back按钮，我回到Table A的内容

Answer 1

我一直在使用jQuery History plugin对于这类事情，它对我来说效果很好。

每个“页面”都由 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，同时将该表更改添加到浏览器历史记录中。