Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Managing the browser navigation history using HTML 5 pushstate and popstate

You might have come across the terms push­state and pop­state in HTML 5 and that made you won­der whats all the buzz about. To sum it up in a sin­gle sen­tence I would say that they are a way to inter­cept and manip­u­late your browser’s nav­i­ga­tion with­out hav­ing to refresh the whole page.

Before we pro­ceed, in order to see which ver­sions of browsers sup­port this func­tion­al­ity natively, check this URL.

Uptil now, updat­ing the URL in the browser meant a refresh of the entire page. How­ever, through HTML 5 push­state and pop­state, you have con­trol over whether or not you want a refresh to hap­pen. This is crit­i­cal for today’s web based appli­ca­tions because of the exten­sive use of AJAX.


Back­ground

relation between browser tab, window and window.history

  1. Every HTML doc­u­ment that you ren­der on a page has its own win­dow object.
  2. Within a tab, you can nav­i­gate to dif­fer­ent doc­u­ments by chang­ing the URL.
  3. Chang­ing the URL auto­mat­i­cally causes the page to refresh.
  4. If you want to change only part of the cur­rent URL, specif­i­cally — any­thing that fol­lows the last ‘/’ — but do not want to trig­ger a page refresh on this URL change, you make use of the HTML 5 pushstate.

Meth­ods

HTML 5 exposes a his­tory prop­erty on the win­dow object. There are 5 main meth­ods on this object.

  1. window.history.forward();
  2. window.history.back();
  3. window.history.go(relativeIndex);
  4. window.history.pushState()
  5. window.history.replaceState()

All of these meth­ods are per doc­u­ment. i.e. If you nav­i­gate from http://mysite.com to http://google.com, mysite.com will have have its own his­tory object that it main­tains and google.com will have its own.


Con­nect­ing the dots

html 5 push and pop

The syn­tax for invok­ing the push­state func­tion is as follows

history.pushState('stateDataString', 'an unused arg', 'url of your state');

The moment you invoke push­State, a new entry is cre­ated in the ‘his­tory’ of the cur­rent doc­u­ment. The browser address bar is updated by replac­ing what­ever comes after your last trail­ing ‘/’ with the url that you sup­ply in the third argu­ment. This also means that you can only use valid URL’s in the same domain and for sanity’s sake, actu­ally some­thing that is log­i­cal to appear after cur­rent url string. The state string is stored as the state of the new URL.

Stor­ing a plain string as the state data strings bor­ing. But what is more use­ful is a stringi­fied JSON object.

The next impor­tant part is the pop­state. There’s a tiny gotcha here. The onpop­state event is fired on the win­dow object and not on the his­tory object.

For exam­ple, if you were on the URL

http://mysite.com/foo.html

Then if you did a push­State for the url ‘efg.com’, using the command

history.pushState( '{"somekey":"somevalue"}', ' ' , '/bar.html' );

The browser would sim­ply update the URL to

http://mysite.com/bar.html

Now, on the same tab, if you nav­i­gate to google.com, you would be at

http://google.com

Now if you press the back but­ton, the browser would take you back to

http://mysite.com/bar.html

And a window.popstate event would be fired. You can han­dle this by

window.addEventListener("popstate", function(e) {
    console.log(JSON.parse(history.state));
});

Ref­er­ences