93

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?

Luiso
  • 4,173
  • 2
  • 37
  • 60

6 Answers6

159

With HTML5 you can modify the url without reloading:

If you want to make a new post in the browser's history (i.e. back button will work)

window.history.pushState('Object', 'Title', '/new-url');

If you just want to change the url without being able to go back

window.history.replaceState('Object', 'Title', '/another-new-url');

The object can be used for ajax navigation:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Read more here: http://www.w3.org/TR/html5-author/history.html

A fallback sollution: https://github.com/browserstate/history.js

Alfred
  • 7,071
  • 4
  • 27
  • 35
  • 4
    +1 Also note; these change the `path` and/or `query string` in the URL; they can't change the protocol, domain, or port (as that would be a security problem as others have pointed out). The `hash` function above can change the anchor (or fragment id) – Chris S Aug 15 '11 at 14:14
  • 2
    just saying, in your example '/item/35'}, there is an extra } added – Zhanger Jan 24 '12 at 03:43
  • Just as a side question, is there a way to enable these URLs to then be indexed in Google? – Peter Featherstone Apr 19 '13 at 08:27
  • 1
    A better library seems to be https://github.com/browserstate/history.js it is actively maintained and widely used whereas fortes-history.js was idle for 3 years. – Gonfi den Tschal Jul 09 '13 at 10:27
  • I am a little new to web development, what would the object be in this case? – Alexander Ryan Baggett Oct 12 '13 at 19:31
  • Can you explain the parameters passed to functions pushState() replaceState() – Minhaz Oct 24 '13 at 16:34
  • 2
    Please note that firefox doesn't support title, so use document.title= "new title". – 0fnt Feb 24 '15 at 06:36
  • @Alfred: do you know of a way how to use this with Angular? – hogan Oct 26 '15 at 21:39
  • @hogan With Angular I would recommend using ngRoute (https://docs.angularjs.org/api/ngRoute) or some library built for that particular framework – Alfred Nov 21 '15 at 22:52
  • I ended up using ui-router. Before I didn't know that the framework handles this for me. Thank you. – hogan Nov 26 '15 at 22:14
31

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
roborourke
  • 12,147
  • 4
  • 26
  • 37
7

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

Justin Wignall
  • 3,490
  • 20
  • 23
3

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.

Galwegian
  • 41,475
  • 16
  • 112
  • 158
  • Rather than being unintuitive, I think you should'n be able to do that because it could be misused for phishing attacks. Anyway, that's +1. – OregonGhost Dec 09 '08 at 10:42
  • Yes, that just occurred to me. Not a good idea. Thanks OregonGhost. – Galwegian Dec 09 '08 at 10:43
  • 1
    I *do* think its possible... Check out Wikimapia... As you drag the map around, the URL gets changed... – Shivasubramanian A Dec 09 '08 at 11:14
  • @Shivasubramanian-a: I looked at Wikimapia, and indeed, they just use the technique suggested by somej and described by sanchothefat: just changing the anchor name. Which is safe against phishing... – PhiLho Dec 09 '08 at 14:38
-1

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.

aalaap
  • 4,145
  • 5
  • 52
  • 59
-1

"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.