Any way to change the header URL without reloading? [duplicate]

Possible Duplicate:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page

my site is completely based on Ajax requests and simple navigation within the site is done from only one single page. This means when users click the menu items it doesn't load another page rather it loads the content inside an HTML element. But when a user wants to link a page to their friend it will always be the same because http://mysite.com/mymainpage.php will always be the same regardless of what ajax pulls up. How can I modify the users header? For instance when they click on "games" can jquery/js/php/html change the current URL address bar on the browser? so that it becomes http://mysite.com/mymainpage.php?games=true. Then the user can just copy the sites url from the address bar and it will lead to the correct section for ajax to load up.

Answer #1:

You can use hashes:

(That's what gmail does: https://mail.google.com/mail/#inbox, https://mail.google.com/mail/#sent)

You can read the hash using

window.location.hash /* gives "#games" */

or

window.location.hash.substring(1) /* gives "games" */

And you can change it using

window.location.hash="#games"

or

window.location.hash="games"

(it seems it works but better use the first option)

Then, each time user clicks a link, change the hash and load the new page like you do now.

And when the user enters to your page, check if there is a hash in the URL and load that page.

You could also add a hashchange event listener. See https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/hashchange

Edit:

No, you can't have two hashes ( http://mysite.com/mymainpage.php#games#fashion )

So if an user goes to http://mysite.com/mymainpage.php?games=true, you should redirect him to http://mysite.com/mymainpage.php#games.

And then you can change it to http://mysite.com/mymainpage.php#fashion without reloading.

Answered By: Oriol
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .



# More Articles