Is there a way to change the browser's address bar without refreshing the page?

Viewed 78058

I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.

After the user clicked the category I want to change the browser's address bar url from

www.mysite.com/products 

to something like

www.mysite.com/products/{selectedCat} 

without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?

6 Answers

To add to what the guys have already said edit the window.location.hash property to match the URL you want in your onclick function.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

I believe directly manipulating the address bar to a completely different url without moving to that url isn't allowed for security reasons, if you are happy with it being

www.mysite.com/products/#{selectedCat}

i.e. an anchor style link within the same page then look into the various history/"back button" scripts that are now present in most javascript libraries.

The mention of update panel leads me to guess you are using asp.net, in that case the asp.net ajax history control is a good place to start

I don't think this is possible (at least changing to a totally different address), as it would be an unintuitive misuse of the address bar, and could promote phishing attacks.

This cannot be done the way you're saying it. The method suggested by somej.net is the closest you can get. It's actually very common practice in the AJAX age. Even Gmail uses this.

"window.location.hash"

as suggested by sanchothefat should be the one and only way of doing it. Because all the places that I have seen this feature, it's all the time after the # in URL.

Related