6

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??

ptamzz
  • 8,567
  • 30
  • 87
  • 138
  • 1
    Oh. I think I got the same thing here. http://stackoverflow.com/questions/4371705/how-to-rewrite-url-without-refresh-like-github-com – ptamzz May 05 '11 at 09:08
  • 3
    This should help you: http://stackoverflow.com/questions/5607902/how-to-change-browser-address-bar-without-reloading-page-html-javascript – Felix Kling May 05 '11 at 09:08
  • ^^ perfect answer in Felix's post. – Atticus May 05 '11 at 09:12

2 Answers2

5

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:

Community
  • 1
  • 1
Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
-1

Yes, I've done it by doing

location.hash = 'foo';

There's other attributes of location you can change, not sure what it's called for '?', probably query-string, get, or soemthing like that.

Atticus
  • 6,255
  • 9
  • 30
  • 56
  • Changing the query string via the `location` object will reload the page. – Felix Kling May 05 '11 at 09:10
  • That will change whatever comes after a hash sign, e.g. you can change mydomain.com/page#foo to mydomain.com/page#bar, but that's not what the question was about. – JJJ May 05 '11 at 09:12
  • fine look at Felix's response: http://stackoverflow.com/questions/5607902/how-to-change-browser-address-bar-without-reloading-page-html-javascript – Atticus May 05 '11 at 09:13