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

»

5 Things to Consider When Designing A Logo For Your Startup

Designing a Logo is essential because it communicates your business. ...

»

What Is Access Control?

Access Control, When running a business, there are dozens of things ...

»

Process Management Solution For a Business

In order to be successful, a company needs to be on the same page and ...

»

5 Metrics You Should Track on Every Blog Post

As a blogger, you may have developed your blog with a variety of blog ...

»

3 of the Most Dynamic LMS Plugins for WordPress

The possibilities are limitless when you want to put a course online ...

»

Do You Really Need Access to Advanced Scripting Capabilities?

One of the features you’ll find most commonly advertised when ...

»

Obvious UX Trends that will Rule 2018

For web design industry, we see new UX trends in the way we build ...

»

Java Programming Language And Its Application

Programming language is one of the main IT developments of the past ...

»

Why Can’t I Add or Install Plugins in WordPress

WordPress is a great choice when it comes to Content Management ...