Abusing the HTML5 History API for fun (and chaos)

http://grack.com/blog/2011/03/07/abusing-the-html5-history-api-for-fun-and-chaos/

by mmastrac • 15 years ago

92 18 15 years ago

pbhjpbhj• 15 years ago

The article at one point asks:

>"What if we could resurrect marquee, but give it all of the screen real-estate of today’s large, modern location bar?"

What indeed. Sets my hard drive mashing - grunt grunt grunt - strangely enough.

gmurphy• 15 years ago

Here's one I made that lets you transition between URLs: http://bodytag.org/rollstate/

We didn't have the button/title flicker when it was first implemented though :\

mmastrac2• 15 years ago

Oh, that's cool. If you're talking about flicker in Chrome, you're probably seeing this bug:

http://code.google.com/p/chromium/issues/detail?id=50298

DougBTX• 15 years ago

Tip: use replaceState for the animation so that the back button still works.

twodayslate• 15 years ago

That is amazing. Great work!

pak• 15 years ago

OK, but websites have used alert() since the dawn of time to trap you on the site with an endless stream of annoying modal dialogs. If this ever catches on, browsers will do exactly what most have done with alert(): if the webpage calls it more than X times a second, the browser asks you, "Do you want to allow Site X to continue to screw with your location bar?" and you can say No.

rflrob• 15 years ago

It isn't too likely to catch on, I think. Unlike the modal alert()s, changing the address bar doesn't prevent one from just closing the tab that has the page in it. Sure, you lose whatever history got you to that site, but I find my history is rarely more than 5-10 links deep, since I tend to spawn new tabs rather than using the current one.

ItsBilly• 15 years ago

It does for me anyway, in Chrome. It makes it nearly impossible to close the tab.

getsat• 15 years ago

> browsers will do exactly what most have done with alert()

In case anyone was wondering why pak said "most"... this is somewhat scary: https://bugzilla.mozilla.org/show_bug.cgi?id=59314

RyanMcGreal• 15 years ago

> On Chrome, the same thing happens, but it’s even worse. Every replaceState call not only wipes out the location bar, but it cancels navigate events too.

This didn't happen for me on Chromium 9.0.597.107 (75357) on Ubuntu 10.04. I clicked on the address bar and it stopped scrolling while the pointer was focused there.

mmastrac2• 15 years ago

It might just be Mac browsers that fail here. I tested on Win7 and the location bar works fine. Bookmark navigation is still cancelled, however.

ahlatimer• 15 years ago

Bookmark navigation on OS 10.6.6 with Chrome 10.0.648.127 beta works just fine. Clicking the address bar doesn't work, though.

Groxx• 15 years ago

Try hitting the refresh button - it acts like it's disabled! Ctrl+R still works, though.

nitrogen• 15 years ago

I'm able to type into the location bar on Chrome 11 on Ubuntu 10.10, but pressing Enter or clicking one of the suggestions has no effect (i.e. the animation keeps running and the navigation is canceled).

jarin• 15 years ago

Couldn't you use this to mask AJAX fragment URLs for the forces of good?

JoshTriplett• 15 years ago

This API exists for that precise purpose. If you want to "navigate" your AJAX application to a new logical page, you use this API to do the navigation, and you supply a state that helps the browser return to the previous logical page when the user hits the back button. (And the same when they hit the forward button.) And you use real URIs, which when the user copies and pastes them will navigate properly to that page without the AJAX magic.

kree10• 15 years ago

See this comment by johnswamps from last year http://news.ycombinator.com/item?id=1535673 for a bookmarklet that does location-bar-marquee.

JonnieCache• 15 years ago

You can recreate the effect by going to your history listing and scrolling up and down. Kinda like those pages with tiled backgrounds that create epilepsy-inducing strobe effects when scrolled.

Abusing the HTML5 History API for fun (and chaos)

Related Stories