Alex Rivera | Logout

Keeping history of hash/anchor changes in JavaScript

Asked 2009-07-03T09:12:15.227
28

I'm currently implementing a JavaScript library that keeps track of the history of changes to the hash part in the address bar. The idea is that you can keep a state in the hash part, and then use the back button to go back to the previous state.

In most of the recent browsers, this is automatic and you only have to poll the location.hash property for changes (In IE8 you don't even have to do that; you simply attach a function to the onhashchange event.)

What I'm wondering is, what different methods are there to keep track of the history? I've implemented functionality that has been tested to work in Internet Explorer 6/7/8, Firefox and Chrome, but what about other browsers? Here's the ways I currently keep the history:

Edit: See my answer below instead for a walk-through of the various browsers.

javascript fragment-identifier
Edit
Report

2 Answers

1

I am not sure I fully understand your needs, but I have used the Really Simple History library (http://code.google.com/p/reallysimplehistory/) for implementing something similar. You can see it here: http://whiteoak.sourceforge.net/

answered 2009-07-03T09:27:39.510
0

I haven't seen anything mentioned about what I am about to say anywhere so I thought I'd share and see how common knowledge it is.

In IE (only verified in IE7), the history with the hash works correctly when there is a page element on the screen with an id equal to the hash. For example, think of a table of contents (TOC) on a wiki page. Each link in the TOC links to a hash of an id or anchor name element somewhere on the page:

<div id="TOC">
<a id="SampleHeaderLink" href="#SampleHeader">Sample Header</a>
</div>

<h2 id="SampleHeader">Sample Header</a>

So when SampleHeaderLink is clicked, the IE browser default setting is to navigate to SampleHeader and register the state in the history. Using the back button and forward button works as expected.

However, if the SampleHeader div does not exist on the page, the browser only registers the url changing but does not create a new state for it.

Again, this is only verified in IE7. And I don't know how common-knowledge this information is but I never found anything related when I was browsing to fix this very issue in my own application.

answered 2011-02-28T20:34:50.120

Your Answer