Updating address bar with new URL without hash or reloading the page

Datetime:2016-08-23 01:18:32          Topic:          Share

Just to make it easier to understand the article, this is what Facebook does when you open a photo, for example. The url bar changes to point DIRECTLY to that photo, so you can share the URL without losing where you are in the site.

Remember sites based on framing last decade? You could only get the homepage url, because only internal frames were changing. And that was terrible.

Introduction (The Question)

Is there any way I can modify the URL of the current page without reloading the page?

I would like to access the portion before the # hash if possible. I only need to change the portion after the domain, so its not like I’m violating cross-domain policies.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

Currently an anchor link on web page looks like <a href="#aboutus">About Us</a> , this takes you to <div id="aboutus"></div> with the help of  javascript.

The javascript looks something like:

$("#navigation a").click(function(e){
  animate(..scroll to section..);
  e.preventDefault(); // <========== helps the url remain same

I believe the “e.preventDefault()” is what is causing the URL to not be updated, but how do I prevent the browser from reloading the page when the URL is changed?

How do other websites do it? What is this method called (so I can further research it)?

How do they get the URL to update without the page reloading?


Hey, I have noticed that when browsing a GitHub repository it uses AJAX to load each folder / file.

I understand all this, I was just wondering how they altered the URL. Can you get and set the URL with JavaScript? If so it could be very useful for bookmarking a section of a JavaScript based website. This is now used by github, while tree navigation.

window.history.pushState("object or string", "Title", "/new-url");

I’d like to add that window.replaceState is much easier to set up and often preferable, e.g. when you want to update the URL after the user changes the value of some dropdown or search field. If you want to use pushState , then you also need to properly support onpopstate event.

You can now do this in most “modern” browsers!

This can now be done in Chrome, Safari, FF4+, and IE10+!

function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html;
    document.title = response.pageTitle;

Your url will change to newUrl without reloading the page.

Note:title arg in the method will not change the Title of the html page. This is used to name the page in the browser history, in case you go back and then go forward.

You can then use window.onpopstate to detect the back/forward button navigation:

window.onpopstate = function(e){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;

For a more in-depth look into pushState/replaceState/popstate (aka the HTML5 History API) see the MDN docs  Check out history.js which provides a fallback for browsers that don’t support the HTML5 history API.

You can also use HTML5 replaceState if you want to change the url but don’t want to add the entry to the browser history:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);

This would ‘break’ the back button functionality. This may be required in some instances such as an image gallery (where you want the back button to return back to the gallery index page instead of moving back through each and every image you viewed) whilst giving each image its own unique url.

For Example – If my html page url is www.example.com/training/product.html. and I want to change my url like to  www.example.com/training/product. It possible using javascript or Jquery  and HTML5 replaceState.

var link = 'www.example.com/training/product.html';
window.history.replaceState( null, null, link );

That’s it!

I hope it’s been an interesting tutorial and not too hard to follow.

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!