Overview
Enabling the back button isn't quite as difficult as it might sound, especially for a project that your starting from scratch. Here's a simple example and then we'll go through the techniques needed to make this happen.
Change Background Color To
If this is not working for you, then you can try this test page.
As you click the different buttons, you should notice the URL of this page is changing. The key is this portion below.
#change-background:990000
When we change the hash of the page, we aren't requesting a new page from the server, the browser thinks we are navigating to a new portion of the page. (Some people know that if there was an ID of change-background:990000 on the page, the browser would attempt to focus on that element) Because of this, it creates a history entry that we can use to track back button usage, and deep linking.
Note on browser inconsistencies
Now obviously not all browsers handle this the same way, thus we use a library which abstracts all these problems away from you and lets you only worry about your application. The library we are using here is RSH (Really Simple History). Here are a few other libraries you could use.
Code
Lets look at the code necessary to implement this feature.
HTML:
-
<h4>Change Background Color To
</h4>
-
-
<li><a class="post-internal" rel="465e77" href="/denim/index.php">Denim
</a></li>
-
<li><a class="post-internal" rel="990000" href="/maroon/index.php">Maroon
</a></li>
-
<li><a class="post-internal" rel="000000" href="/black/index.php">Black
</a></li>
-
</ul>
This is the HTML for the 3 buttons, some of the important things to note here.
- I tagged each button with a "post-internal" class. This allows me to create a generic function that attaches the history logic.
- I attached the history information to the element. I typically use the rel to attach information to elements, I don't know why, its just the way its always been done.
- I've added an href, so if the user doesn't have Javascript enabled, they could navigate to the separate index pages in the color directories which would know they need to color the page. This is certainly overkill for a background color change, but its one of the important aspects of unobtrusive Javascript.
Obviously the heavy lifting is in the Javascript.
JavaScript:
-
window.dhtmlHistory.create({
-
toJSON: JSON.encode,
-
fromJSON: JSON.decode
-
});
-
-
window.addEvent("load", function() {
-
window.dhtmlHistory.initialize();
-
window.dhtmlHistory.addListener($listener);
-
-
$$(".post-internal").addEvent("click", function(ev) {
-
-
window.dhtmlHistory.add("change-background:" + this.getProperty("rel"));
-
-
//--- Event Code
-
changeBgColor(this.getProperty("rel"));
-
-
//--- Don't go to the HREF address.
-
new Event(ev).preventDefault();
-
});
-
});
-
-
function $listener(newLocation, historyData) {
-
//--- If not the url event we are looking for, escape.
-
if(newLocation.indexOf("change-background:") == -1) return;
-
-
//--- Set the background of our HTML element to the color specified in the URL.
-
changeBgColor(newLocation.replace("change-background:", ""));
-
}
-
-
function changeBgColor(newBgColor) {
-
$(document.body).setStyle("background", "#" + newBgColor);
-
}
This is the entire contents of my sample script file, so we'll go down through each section.
JavaScript:
-
window.dhtmlHistory.create({
-
toJSON: JSON.encode,
-
fromJSON: JSON.decode
-
});
RSH creates itself in the property window.dhtmlHistory, so thats already going to be there for you. RSH uses some JSON to track its history data, so you'll need to supply it some methods for serializing and de-serializing. It does come with these methods in a separate file, but since Mootools already includes these, I just used the ones from Moo.
This you can go ahead and do outside of any events.
JavaScript:
-
window.addEvent("load", function() {
-
window.dhtmlHistory.initialize();
-
window.dhtmlHistory.addListener($listener);
-
-
$$(".post-internal").addEvent("click", function(ev) {
-
-
window.dhtmlHistory.add("change-background:" + this.getProperty("rel"));
-
-
//--- Event Code
-
changeBgColor(this.getProperty("rel"));
-
-
//--- Don't go to the HREF address.
-
new Event(ev).preventDefault();
-
});
-
});
A bunch of stuff here, we attach our initialization logic to the window load event as RSH explicitly states
RSH will break, especially in IE, if you try to initialize it from any flavor of DOMContentLoaded.
Once in the loaded event, we call initialize to start the process, and then we add our listener. This listener function is what will get called every time someone hits the back button, forward button, or even the page being loaded with a hash value.
Inside the onload event, we add our onclick event for the buttons.
When the button is clicked, we use the add() method of RSH to add a new history entry. While the listener method is probably 40% of the logic you will need to provide to implement history tracking, this single call is the other 40%. Really those two features make up the meat of it.
The value we pass to the add needs to be descriptive enough that we can figure out what to do with the information in our listener event. In my example, I'm appending "change-background:" to the hash code, so when my listener fires, I know that it has the information I want (someone else isn't doing some other history tracking) and that I know what to change the background to.
Now when you add a history entry, RSH does NOT fire the history change event listener. (It really should, more later) So you need to also attach your logic for the event as well, which is a simple changeBgColor method with the rel information of the clicked on link.
Lastly, we don't want to actually go to the URL specified in the anchor tag so we use preventDefault() to cancel that.
JavaScript:
-
function $listener(newLocation, historyData) {
-
//--- If not the url event we are looking for, escape.
-
if(newLocation.indexOf("change-background:") == -1) return;
-
-
//--- Set the background of our HTML element to the color specified in the URL.
-
changeBgColor(newLocation.replace("change-background:", ""));
-
}
This is our event that gets fired every time the history changes. When our listener here gets fired, it looks to see if any change-background information is in the URL, and then it parses out the hex value and calls the changeBgColor method.
With this method, you'll want to start thinking of the URL as a full description of the state of your application. The less you track in your URL, the less the user can bookmark to, and the less they can back button out of. The extent to which you implement this is totally up to you, and admittedly this could make your URL quite complex...
Gripes about RSH
I wanted to use RSH because its had quite a bit of development on it, so I assumed it would be a solid bug free library. Plus it has one purpose, Ajax applications history tracking, unlike SWFAddress which has some integration with Flash and thus feels like using the wrong tool for the job sometimes.
Though I have a big problem with it not firing the listener event when we use the add() method. Since we put all the information in the URL, and we have to write the listener method to parse that information and set the page to that state, there's no reason to put that logic anywhere else. Be aware you won't always have to duplicate your code like this in the other libraries, SWFAddress specifically.
One last note about Deep linking
When you implement the back button, you get deep linking for free. I know, you rarely get things solved for free, but since we are using the URL to describe the state of our application, when the page loads up RSH will fire off our listener event notifying us theres some information in the hash. From there, our application doesn't care how that information go there, its just going to operate on it.
Download Sample Code
Justise-BackButton.zip
7 comments
