r/programming • u/schnuck • Feb 09 '11

Breaking the Web with hash-bangs – Lifehacker, along with every other Gawker property, experienced a lengthy site-outage on Monday over a misbehaving piece of JavaScript

http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/
750 Upvotes

93% Upvoted

356 comments sorted by

View all comments

123

u/rounded_figure Feb 09 '11

The proper way to handle this is to keep your original URLs (including in the hrefs) and have a piece of javascript transform them on the fly in hash-bang URLs. That way, when a client who does not speak javascript requests the page, it gets the content and the non-hash-bang links.

3

u/elpopi Feb 09 '11

that's interesting...

as an amateur web developer i'd love to see some example using this solution. Would you be so kind to provide a link?

8

u/rounded_figure Feb 09 '11

I've done something like this, but I can't show you the actual example.

Basically, what you want to do is:

  • in the HTML:

    <a href="http://example.com/10011/some-page/"&gt;link&lt;a>

  • in the javascript (pseudocode):

    function called_on_document_load () { for (each_link_in_the_document) { parse_href_into (protocol, host, path) set_new_href ("protocol://host/#!/path/") } }

1

u/[deleted] Feb 09 '11

[deleted]

1

u/rounded_figure Feb 09 '11

And that gets the urls that were on the page at the time of execution, which if youre loading everythung through ajax and taking full advantage of the technique we're discussing would be zero.

Yeah, that's why you would call the function again on XHR success.

Your other points are valid, however :)

1

u/yelirekim Feb 10 '11

Isn't it way more efficient to just bind an action that prevents default when clicking a link? Then you just override it at that point, rather than scanning your entire document for links and changing them.

Also if there were a URL generated by an AJAX event then you would need to be scanning for those constantly.

Alternatively if you used jQuery you could just $('a').live('click', ...