Question

OK, this what I’m trying to do (I think Google mostly does this as well) :

Scenario A :

In page /Main_Page let’s say there are 3 sections. When user clicks on section A “link”, section A‘s content is loaded through AJAX and embedded into the page.

Scenario B :

When /Main_Page/Section_A is loaded, we practically go to the very same page (as in scenario A) – /Main_Page and load Section A via AJAX – as before.

---

The problem :

We’ve got 2 identical resulting pages, but the URL is different (in the first case it’ll be just /Main_Page, while in the second it will be /Main_Page/Section_A).

What I want to do :

• In Scenario A, after loading Section A via AJAX, how should I do it so that the appearing URL (in the browser address bar) is /Main_Page/Section_A (or anything else for that matter), without any sort of redirecting, page reloading, etc?

Answer 1

Your problem can be solved by implementing the History API, especially by using the pushState() method. I recommend reading about it in MDN. There’s also an all-in-one solution called History.js, it will help you implement it x-browser easily (It will fallback to URL hashes # if the browser doesn’t support it).

Here’s an example:

history.pushState('', 'New Page Title', newHREF);

Not excited enough? Here’s a demo that will encourage you to implement it.