0
votes

I have added AJAX to a client's site to enable some simple animation of page transitions. So if we navigate to his homepage (with js enabled) at firedogcreative.com and then navigate to his edit page, and then to one of his work pages; we end up with a history something like this:

firedogcreative.com --> firedogcreative.com/#edit --> firedogcreative.com/#example1

Ajax takes care of loading the content of each of those pages in, it updates the hash in the URL bar in each case, and all works exactly as planned.

When a user clicks the back button, though, I'm not sure I understand what is happening. If they are at #example1 and hit the browser's back button, the URL bar updates to firedogcreative.com/#edit, but the page content doesn't change. If the user then reloads the page, though, it correctly reloads to #edit.

I tried adding this, which I thought would cause the pages not to cache and thus each back button call would reload the page, but it didn't seem to have an effect:

window.onbeforeunload = function () {
   // stuff do do before the window is unloaded here.
};

If that worked, it would be a passable solution. The page would only ever ACTUALLY reload when the user uses the forward/back buttons, which would be fine.

So my question is, what is going on with the back button? Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?

1

1 Answers

1
votes

So my question is, what is going on with the back button?

It is going back to the previous URL.

Since changing the fragment identifier to track application state is a hack, nothing else happens.

Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?

No. You are navigating back within the same document, so it isn't being unloaded.

You need to monitor the hashchange event and change the application state with your own JS.

Alternatively, switch to using pushState and watch the popstate event.