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表格。所以我的问题是，如果我点击changeA，然后点击changeB，我该如何操作历史记录，这样如果我点击back按钮，我会回到Table A的内容1}}

Answer 1

我一直在使用jQuery History plugin来做这件事，而且对我来说效果很好。

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

修改我将扩展链接中给出的示例，以便为您的情况应用更多。

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代码上设置事件处理程序，以便在单击这些按钮时调用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

原生'location'对象有一个'hash'属性，可用于在AJAX / JS应用程序中导航。

您可以使用History plugin或Address plugin。

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

Answer 3

你应该查看Ben Alman's Back Button and Query Library关于浏览器历史记录的最佳api，并有一些很好的例子可以帮助你入门。

Answer 4

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

如何操纵网页的历史？

4 个答案: