Question

I’ve a link on my webpage, say ‘about’. Clicking on it loads a particular div without refreshing the whole page using jquery .load(). This does not change the URL string in the browser address bar.

The same page can be accessed by going to www.mydomain.com/?page=about.

So what I want to do is, when the user clicks on the ‘about’ link, the pages will be loaded as it is (using jquery), but I want to change the URL string in the browser address bar also so that someone can actually copy or bookmark the exact page.

Is it possible to do so??

Answer 1

You have two possibilites to tackle this problem:

• In newer browsers you can make use of the HTML5 history API, which lets change part of the URL, also the query string (and path afaik).

• In browsers which don’t support this, you can only change the fragment identifier # without reloading the page (via the location object). That means you have to change the URL to e.g.

  www.mydomain.com/#!page=about
  

  #! is a convention from Google to make Ajax sites crawlable. As the fragment identifier is not sent to the server, you have to detect it with JavaScript and load the corresponding data from the server.
  There are jQuery plugins that help you to handler this.

I would look for a good plugin makes use of the history API if available and falls back to the hash based solution.

---

As written in my comment, you can also find more information here:

• How to change browser address bar without reloading page, especially @ThiefMaster’s answer.