HTML5 - History Api
Brief about window.history.
With dynamic Ajax web applications, where the browser updates the page in parts instead of changing location entirely, it’s difficult to give the user a URL to bookmark or share the current application state.
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.
Why would you manually manipulate the browser location?
The HTML5 history API is actually designed to ensure that URLs continue to be useful in script-heavy web applications.
what does a URL do?
Identifies a unique resource.
You can link to it directly.
Search engines can index it.
Change the URL, even through script, it triggers a roundtrip to the remote web server and a full page refresh.
The HTML5 history API lets you do way tell a browser to change the URL but only download half a page.
A,B Pages Imagine
The history.pushState() function takes three parameters:
1. state can be any JSON data structure. It is passed back to the popstate event handler, which you’ll learn about in just a moment. We don’t need to track any state in this demo, so I’ve left it as null.
2. title can be any string. This parameter is currently unused by major browsers. If you want to set the page title, you should store it in the state argument and set it manually in your popstate callback.
3. url can be, well, any URL. This is the URL you want to appear in the browser’s location bar.
the history.pushState() function to push a fake URL onto the browser’s history stack, when the user presses the back button, the browser will fire a popstate event on the window object.
History.js, a meta-API for manipulating history in both newer and older browsers
<< Back to the blog