How to change the URL without refreshing web page

Many web apps , these days, modify or change URL without refreshing web page. Facebook is a great example. This seems quite fast and index-able too. This is supported by Chrome, Safari, FF4+, and IE10 & above.

function processAjaxData(answer, url){
     document.getElementById("mycontainer").innerHTML = answer.html;
     document.title = answer.pageTitle;
     window.history.pushState({"html":answer.html,"pageTitle":answer.pageTitle},"", url);
 }

To detect the back/forward button navigation , you have to use following code :

window.onpopstate = function(event){
    if(event.state){
        document.getElementById("mycontainer").innerHTML = event.state.html;
        document.title = event.state.pageTitle;
    }
};

That’s it, try it once.

Scroll to Top