Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Manipulating Browser URLs Using JavaScript (Without Refreshing the Page)

DZone's Guide to

Manipulating Browser URLs Using JavaScript (Without Refreshing the Page)

· Web Dev Zone
Free Resource

Try RAD Studio for FREE!  It’s the fastest way to develop cross-platform Native Apps with flexible Cloud services and broad IoT connectivity. Start Your Trial Today!

In modern browsers, one of the most interesting features is that you can change the browser URL without refreshing the page. During this process, you can store the state of the history so that you can pull the necessary data when someone hits the back button in the browser and then take necessary action based on that. It’s not as complicated as it may sound now. Let’s write some code to see how it works.

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History objects pushState() method takes three parameters, as you can see in the above example. The first one, a JSON object, is very important. This is where you will be storing arbitrary data related to the current URL. The second parameter will be the title of the document, and the third one is the new URL. You will see your browser’s address bar is updated with the new URL, but the page was not refreshed :)

Let’s see another example where we will be storing some arbitrary data against each URL.

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
}

Now run and hit the browser back button to see how the URL is being changed. For each time the URL is changed, it is storing a history state object with the value “id”. But how can you retrieve the history state and do something based on that? We need to add an event listener for the “popstate” event, which is fired every time the history object’s state is changed.

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
  alert(i);
}
 
window.addEventListener('popstate', function(event) {
  readState(event.state);
});
 
function readState(data){
  alert(data.id);
}

Now you can see that whenever you hit the back button, a “popstate” event is fired. Our event listener then retrieves the history state object which was associated with that URL, and prompts the value of “id".

It’s easy and pretty interesting, eh?



Get Your Apps to Customers 5X Faster with RAD Studio. Brought to you in partnership with Embarcadero.

Topics:

Published at DZone with permission of Hasin Hayder, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}