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

Question

Here is my what I have

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

So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA , the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA , then click changeB , how can I manipulate the history so that if I click the back button, I go back to the content of Table A

Answer 1

I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.

Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.

EDIT I'll expand on the example given in the link to apply more for your situation.

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;
    });
});

What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:

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

clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.

Answer 2

The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.

You could use History plugin or Address plugin .

Address plugin gives more flexibility and recommended for more complex apps.

Answer 3

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

Answer 4

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