How to Create Bookmarkable Hash/Anchor (#) Links in IE 5.5/6/7/8

January 17, 2010

Okay, so recently I had a client project that sounded pretty simple: all I had to do was to take their existing Flash website and make it so that they could deep link their samples and different site sections, on-the-fly (programatically) without hand-coding each new link.

The project.

The customer had coded it so that the flash used an XML document and sample names to identify and pull them up. I won’t go into great detail about the Flash, let’s just say that all I did was to call an external function using the ExternalInterface method “window.location.href.toString” and it dutifully retrieved the current URL from the browser of the page that was currently being displayed. 
 
Then, I simply compared the current URL to the one that Flash thought was being displayed. If they matched, I added the URL to the browser’s history. If they did not match, then I loaded the appropriate sample and updated the browser page URL so they both matched. 
 
For those who are interested, I can write an article about the solution above. However, for the purposes of this article I want to talk about a really simple and forward-compatible way to add items to Internet Explorer’s history without having to resort to using someone else’s fancy external javascript, Ajax, Visual Basic, or any other trick code that might break on the next version of Internet Explorer. 
 

Success.

Okay. So I got my solutions to work flawlessly in Flock, Netscape, Safari, Opera, and Firefox. I was thrilled that it only took me about 3-4 hours from start-to-finish. That did not take any longer than I thought it would. Hooray! Then…. I turned around to my craptastic-PC and started testing on all of the browsers under Windows XP. 
 
It simply didn’t work. Not at all. The page just kept-reloading in an infinite loop and NOTHING was being added to the history… After an hour of sobbing, I picked myself up and settled in for the long-stuggle I knew I had ahead of me. 
 
Why doesn’t Microsoft simply add history items like everyone else? Who knows! I am willing to bet that there was a very long and boring meeting about it in Redmond, Washington that sort of went like this:
 
“So, what about adding items to the user’s history?”
 
“Sure. Let’s add whatever they are viewing as a new entry into the history unless it is a duplicate entry.”
 
“Okay. Sounds good. How about when the user visits an HTML anchor link inside the same page?”
 
“Well, let’s not bookmark those. They are not really links.”
 
“Sure they are. They send you to another location and you might want to hit the back button to backup-through them…”
 
“No. That’s dumb. Why would any want to do that? I can’t imagine any reason that people would ever want to do that so, rather than just leave it as a possibility, or make it so people can change a preference, let’s just make it the standard that no hash links (#) indicating anchors will be saved in the history….”
 
The rest is… yes, I have to say it: history.
 

Aaaaaaaarg!

That is all I can say right now.
 
I can think of at least ONE really good reason. And I am sure there are many other people out there who have their own good reason.
 
Hey, Microsoft! Stop deciding what is best for the user and eliminating possibilities that you cannot imagine a use for! Sheesh. It’s like having your parents over for dinner and they continually edit your conversation. Your way is not EVERYONES’ way.
 

The Hash (#) Maneuver.

Now that that’s over, let me tell you how I finally overcame this dreaded “feature” in Internet Explorer:
 
1. I generate my dynamic links as I would in any other browser.
 
2. However, this time, instead of my link looking something like: ” http://www.mysite.com/#sampleID “, it ended up only working when it was formatted like: ” http://www.mysite.com/?sampleID/#sampleID “.
 
3. So, I had to check to see if the current browser was IE (of any flavor) and then format the new URL according to the above sample, starting my new sample URL with a query string (?) instead of simply adding a hash mark (#).
 
What did I learn from this? I learned that IE, for some odd reason, does not think that hash-links (anything starting with a hash mark “#”) are worth noting in the user’s history. The only way for me to easily add the entry to the history was to start my sample URL portion of the page URL with a string query (?). Luckily, IE accepts that any URL with a query in it might be important enough to save. Also, other browsers treat query links in the same way. So, at least we have a sort of pass-through channel for our hash-link.
 
Since the query string gets ignored by the page, unless you capture the variable and use it for something. It was easy to then pass the entire URL to Flash and using the String.split(“#”), create an array that contained the prefix of the URL and suffix.
 
The suffix contained my actual hash-link and so I was able to pull the sample name from it and then tell Flash to retrieve and display the proper sample.
 

Postmortem.

Why… why… why… does Microsoft continually do this to us? Hey, Guys! How about you actually talk to people who use your software and not just listen to the ones who are coding it? Make technology conform to the way people function. Don’t make people conform to the way technology functions.
 
For support of hash-links, I would have to give Microsoft an F-.

Advertisements