Search code examples
javascripthtmlgoogle-chromesingle-page-applicationhashbang

Dynamic web application without hashbang #!


How is it possible that web applications like Google Maps and Mixcloud update their urls without the use of a hashbang (also known as #!)?

Notice for example the coordinates right after the @ sign in the URL while swiping the view in Google Maps. Or note that the music keeps playing while following some links.

I'm looking for a programmatic way to achieve the same functionality and I would also like to know how this works.


Solution

  • The HTML5 history API is a standardized way to manipulate the browser history via script. Part of this API — navigating the history — has been available in previous versions of HTML. The new parts in HTML5 include a way to add entries to the browser history, to visibly change the URL in the browser location bar (without triggering a page refresh), and an event that fires when those entries are removed from the stack by the user pressing the browser’s back button. This means that the URL in the browser location bar can continue to do its job as a unique identifier for the current resource, even in script-heavy applications that don’t ever perform a full page refresh.

    Source: http://diveintohtml5.info/history.html