In Javascript, perferably JQuery, how do I add something to the URL when the user clicks "back" button in the browser?

Question

When the browser clicks "back" button, I want to append "&page=3" to the URL. How do I bind it, and then do this?

Edit: I want this very simple.

BIND the event{
window.location(that-url + "&page=3")
}

Can it be done that simply?

Answer 1

It sounds like you're trying to create a history plugin.

Have you tried using using the mikage history plugin?

I wouldn't recommend changing the URL when they navigate away from the current page (which is what the back button does), because you immediately erase the forward history (thus breaking the forward button). When trying to handle the back button with pagination and javascript/ajax it is more typical to use the browser hash to pass parameters. The JavaScript namespace doesn't get cleared when the forward and backward buttons are used and the hash is updated according to what navigation was used. These history plugins have a couple of methods to detect when navigation is used (as the doc load event doesn't fire).

So beware, writing a history plugin isn't straightforward because of the way browsers fail to consistently handle hash property of the location object (part of the window object). You will definitely want to look at what others have done.

Answer 2

We use the window.location.hash to handle the history in our app.
I guess it works well in single page apps and is very simple.

For multiple pages app, I don't think it's a good idea to try to control and change the natural page history of the browser.

When the user clicks "back" or "next", the hash key gets the previous or next value.
Because of IE7 you need to use a polling technique (but it is ok in all browsers), with a setInterval(...) and a fast function that checks for instance every 300ms if the hash has changed.

Then, if a change occurs, act accordingly.
ie: call the server and refresh some areas in the page.

It works very well, and does not kill at all the responsiveness of the application.