如何操纵网页的历史记录？答案

【问题标题】：How to manipulate the history of the web page?如何操纵网页的历史记录？
【发布时间】：2010-03-24 18:56:25
【问题描述】：

这就是我所拥有的

<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 一个表给它。所以我的问题是，如果我点击changeA，然后点击changeB，我该如何操作历史，如果我点击back按钮，我会回到Table A的内容

【问题讨论】：

标签： java javascript jquery jsp history

【解决方案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;
    });
});

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

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

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

【讨论】：

你认为你可以给我一个快速的示例代码。网站上的示例对我来说没有多大意义。
添加了一个例子。希望这会有所帮助。
我成功实现了这一点。但是，我不认为这是我完全想要的。这不会保留页面的内容，它只是调用 function()。我遇到了将参数传递给函数的问题......就像在createTableA() 中说的那样，有一个checkbox，它的内容B 取决于我点击的checkbox。所以当我check框，点击ChangeB，B的内容现在加载。因此，当我单击back 按钮时，A 的内容会重新加载（很好！），但是如果我单击forward，B 的内容不会正确重新加载，因为它不知道我单击了哪个checkbox。

【解决方案2】：

本机“位置”对象有一个“哈希”属性，可用于在 AJAX/JS 应用程序中导航。

您可以使用History plugin 或Address plugin。

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

【讨论】：

我尝试了历史插件，我遇到了将参数传递给函数的问题......就像createTableA()中说的那样，有一个复选框，它的内容B取决于什么我点击的复选框。因此，当我选中复选框时，单击 ChangeB，B 的内容现在加载。因此，当我单击后退按钮时，A 的内容会重新加载（很好！），但是如果我单击前进，则 B 的内容不会正确重新加载，因为它不知道我单击了哪个复选框。我现在正在尝试查看地址插件，但是您是否知道，地址插件可以解决我的问题吗？
地址插件与历史插件略有不同。在您的情况下，您需要在 createTableB 函数中设置 url 参数。在 externalChange 回调中，使用 event.parameters 获取这些 url 哈希参数。 asual.com/jquery/address/samples/form

【解决方案3】：

您应该查看 Ben Alman's Back Button and Query Library Great api 以了解浏览器历史记录，并提供一些很好的示例来帮助您入门。

【讨论】：

【解决方案4】：

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

【讨论】：