Changing browser's address bar without refreshing

Question

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

I want to after user clicked the category change the browser's address bar url from "www.mysite.com/products" to something like "www.mysite.com/products/{selectedCat}" without refreshing the page.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

Hi,

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

Answer 6

We use digital magazines to display our content which are written in flash/action script. We have quite a complex Google Analytics installation to track page views through the content on a page turn for example. But because the URL never changes users always link to the homepage instead of the relevant page. From an SEO perspective if we were to add to our existing onclick pageturn event the above (which is an ideal solution), the search engines wouldn't credit those links as being unique because the # or pound sign is not deemed to be a unique URL. Im going to investigate rewriting those urls to remove the # when they are actually resolved server side. Although 100% of the link juice won't be passed at least some will move through the 301 redirect. What do you think?

Answer 7

With Html5 you can modify the url without reloading:

# if you want to make a new post in the browser history ie back button will work
window.history.pushState('Object', 'Title', '/new-url');

# if you just want to change the url without beeing 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#history-0

A fallback sollution: http://github.com/fortes/history.js/