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.

How to Update Address Bar with New URL without reloading the webpage?

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

Updating address-bar with new URL without hash or reload 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?

JavaScript’s Solution – pushState / replaceState

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!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajHTMLJAVASCRIPTjQueryTutorialsadvance web technology,ajax,configurable settings,doctype html,free open source,html basics,html5,HTML5 history API,HTML5 replaceState,interactive web applications,javascript,javascript functions,jquery,open source javascript,popstate,pushState,reload page,reload page javascript,reloading url without refresh,replaceState,update url,visual transition,window.onpopstate,window.replaceStateJust 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.