SO I'm about to put together a new site and I'd like to go about it by making a web application that parses /#!/ url's and requests content accordingly via AJAX calls to a JSON API that is already put together.

My questions are...

  1. What are the best practices concerning #! url's
  2. Are there any good JavaScript libraries that are built to handle Routing as well as History? or should I roll my own?
  3. What are the pitfalls I should be aware of?

Please no "/#!/ url's are breaking the internet!" comments , I've read Mike Davies Article as well as this one and this other one.

I want to hear from people who have already implemented this type of a url structure and can tell me about their experiences.

  • 7
    I prefer using the HTML5 history API (davis is a good library). The only downside is that IE doesn't support it so have to have real server-side routing for IE.
    – Raynos
    Commented Jun 30, 2011 at 17:34
  • @Raynos Which version of IE? I don't have to worry about IE6.
    – Greg Guida
    Commented Jun 30, 2011 at 17:40
  • IE9 does not support HTML5 history API. IE10 might if your lucky.
    – Raynos
    Commented Jun 30, 2011 at 17:46

2 Answers 2


Although I think pushState based routing is, in most cases a preferable solution, I understand that sometimes hash based routing is a better fit.

As others have suggested you can use davis.js, which supports pushState based routing by default, but can work just as well with hash based routing if you need it, see the code here.

  • Wow, didn't expect the author of the library to come and help me out :) . I've already Implemented the site with Davis using push state and falling back to traditional routing.
    – Greg Guida
    Commented Jul 25, 2011 at 13:19

Not sure if this will help, but I have been working on a dynamic page using the url hash to control page content. The dirty way I found to do this was to set the hash, for each new page, and poll the url for any hash changes. For example: I pull a number off the hash, and compare it to the current page number, if different the page changes. if location.hash = #page1 when actual page is 2 the page will change to 1 and the hash stays at #page1.

An important trick is to actually have the hash tags in the website html. Mine are all in one div at the top of the page. a name='page1' This is necessary to maintain the history.

This allows bookmarking and refreshes and such but will not allow search engine indexing. I have a rather convoluted method involving no script pages which can be indexed and are the source of the dynamic data, to accomplish this.

As long as it is done properly, it can work. The search engine support for it is on the way as well.

  • Another problem I ran into is triggering the href event and some javascript. The best way I found was to use:
    – MrHayman
    Commented Jul 20, 2011 at 2:04
  • a href='#page1' onclick='return pager(1);' and return true from the pager function
    – MrHayman
    Commented Jul 20, 2011 at 2:05
  • you should try this or davisjs like @raynos suggested
    – Greg Guida
    Commented Jul 20, 2011 at 4:46
  • Or try history.js
    – Raynos
    Commented Jul 20, 2011 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.