Dynamically change URL using Push and Popstate

By sean on May 22, 2013

This is a simple example using Push and Popstate. This practice is becoming more common throughout sites such as Twitter and Facebook for changing a URL within the address bar without reloading another page. Typically this allows users to bookmark or share URLs when sites are using some type of infinite scroll.

These two methods are now a part of the extended Javascript History API introduced in HTML5.

Ideally pushState is used to push a new URL to the address bar; while popstate is executed once a user hits 'Back' in their browser. Essentially pushState is a function and popstate is an event.

The example below will simply modify the URL of a given page. However, this method can only modify locations within the same domain. The purpose of this example snippet is to provide a basic understanding of these two methods work. Sidenote: we'll also be making use of jQuery but, it's not required.

Thanks to Stackoverflow for some of the popstate code used here. Some browsers (Chrome thusfar), execute popstate on initial page load, so the code presented here is used to detect and circumvent that.

<a href="#" data-location="/inbox/12">Email Item 12</a>
<a href="#" data-location="/inbox/13">Email Item 13</a>
$('a').click(function (e) {
  e.preventDefault();
  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('data-location')); // URL is now /inbox/N
    // showMailItem(); // example function to show email based on link clicked
  }
  return false;
});

// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

$(window).bind('popstate', function (event) {
  // Ignore inital popstate that some browsers fire on page load
  var initialPop = !popped && location.href == initialURL
  popped = true
  if (initialPop) return;

  // showMailOverview(); // exmaple function to display all email since the user has click Back.

});

Comments

Sign in to comment.
Hawkee   -  Sep 29, 2014

Just used this on the new page editor. When you create a new snippet the data is saved through JavaScript and the URL is changed with a push state. Much snappier this way.

 Respond  
Sorasyn   -  May 23, 2013

Is this the JQuery implementation to a similar "Stack" object often seen in OOP languages?

sean  -  May 24, 2013

I'm not exactly sure what you're referring to but, Javascript is a great OOP language that also allows for procedural programming. jQuery however, is a framework that's generally used to simplify workflow for common tasks (such as events, requests, etc.). Hopefully that helps a bit :)

Sorasyn  -  May 24, 2013

Not quite what I was after, but that's alright. I was reading your description and it sounded as if it behaved like a Stack object, Stacks can push and pop objects to and from the top of the stack. LIFO type data structure.

Whereas this pushes and pops URL information when the back button is pressed (Presumably to load the previous page state).

Sign in to comment

Hawkee   -  May 23, 2013

I think a more specific or detailed title will draw a lot more traffic to this. This is certainly useful.

sean  -  May 23, 2013

What did you have in mind?

Hawkee  -  May 24, 2013

Maybe something along the lines of "Dynamic URL Changer". Try this search: https://www.google.com/search?q=dynamic+URL+changer&oq=dynamic+URL+changer - If you respond to the StackOverflow questions with a link to your solution here you might just get some StackOverflow rep and quite a few pageviews here.

Hawkee  -  Feb 26, 2014

Looks like your change is paying off. This has been the most viewed snippet on the site for the past couple days.

Hawkee  -  Feb 26, 2014

How strange, the stats went down. Seems Google was off and they corrected their mistake.

sean  -  Feb 27, 2014

Interesting. Well with that traffic, hopefully this snippet is able to help someone then :P
So are the Hawkee statistics for this page correct? I'm seeing about 550 page views for Feb and 620 for Jan

Hawkee  -  Feb 27, 2014

Yes, those are a reflection of the stats I have on Google Analytics, so they're always updated and accurate.

sean  -  Mar 03, 2014

Odd, it seems that the numbers (across several snippets) have dropped to 0 since the 28th lol

Hawkee  -  Mar 03, 2014

@sean Thank you for catching that. I had changed my password and forgot to change it on the cron script that updates these stats.

Sign in to comment

Hawkee   -  May 22, 2013

Very useful, good post. This uses jQuery, so it might be more appropriate to save it as a jQuery snippet rather than straight JavaScript.

sean  -  May 22, 2013

Good point. I was going back and forth on that. Honestly, I should have removed jQuery but I wanted the example to be somewhat practical. Thanks for the feedback! :)

Hawkee  -  May 22, 2013

It'll make a nice addition to our growing query section.

Sign in to comment

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.