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.

Recently Published

»

Which One is Better? DigitalOcean Or AWS?

Digitalocean or AWS: Picking a cloud service for your application or ...

»

Killing way to select Domain Name and Hosting

Planning to launch your online presence? We know it’s all very ...

»

7+ blogs to inspire how they made more than $200 in a day

On this page I want to go through the blogs on how they earn money ...

»

5 Best Practices to Make Responsive Web Design in 2020

According to statistics, 40.1% of the time spent on websites came ...

»

7 sites to download free stock videos for TikTok or YouTube

Many of us always wandering for free stock videos to integrate into ...

»

Website Uniqueness: How it affects your blog success?

Recently, more and more people use website builders ‘cause it is ...

»

8 Must-Know Things to Consider Before Starting Online Store

Are you planning to step into making a new online store or want to ...

»

4 flawless WordPress Plugins for Employee Management

Keeping your employee management in check is an important part of ...

»

Kubernetes: Why Today’s Programmers Need to Understand

Launched by three Google engineers, Kubernetes is a container ...