Jquery: change url without redirect?

Question

Possible duplicate:
Change the address bar URL in an AJAX application to match the current state

How to change url without page redirection?

For example, when I click on this link below:

<a href="http://mysite.com/projects/article-1" class="get-article">link</a> 

I will take the URL from the link:

 var path = object.attr('href'); 

If I do this below, the page will be redirected:

 window.location = path; 

I want to do something like this site , when you click on the image, the ajax call will request the requested page and the URL in the window will also change, so that it has a path to what you click.

Answer 1

NOTE: history.pushState() now supported - see other answers.

You cannot change the entire URL without redirecting, you can change the hash instead.

hash is the part of the URL that comes after the # character. This was originally intended to direct you (locally) to sections of your HTML document, but you can read and modify it through javascript to use it as a global variable.

---

When applied well, this method is useful in two ways:

• browser history will remember every other step you took (as URL + hash changed)
• you may have an address that not only refers to a specific html document, but also gives your javascript a hint about what to do. This means that you end up pointing to the state inside your web application.

---

To change the hash, you can do:

 document.location.hash = "show_picture"; 

---

To keep track of hash changes, you need to do something like:

 window.onhashchange = function(){ var what_to_do = document.location.hash; if (what_to_do=="#show_picture") show_picture(); } 

---

Of course, a hash is just a string, so you can do what you like. For example, you can put an entire object there if you use JSON to format it.

There are very good jQuery libraries to do extra things with them.

Answer 2

See here - http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402

Essentially:

 history.pushState('data', '', 'http://your-domain/path'); 

You can manipulate a story object to do this job.

It works in only one domain, but since you are satisfied with the use of the hash tag approach, it does not matter.

Obviously, you will need to check the cross browser, but since it was posted on the Opera forum, I’m sure it will work in Opera and I just tested it in Chrome and it worked fine.

Answer 3

This site uses the fragmented part of the URL: the material after the "#". This is not sent to the server by the browser as part of the GET request, but can be used to store the state of the page. So yes, you can change the fragment without causing the page to refresh or reload. When the page loads, your javascript reads this fragment and accordingly updates the contents of the page, receiving data from the server using ajax requests as necessary. To read a snippet in js:

 var fragment = location.hash; 

but note that this value will include the "#" at the beginning. To set a snippet:

 location.hash = "your_state_data"; 

Answer 4

You cannot do what you ask (and the linked site does not do the same).

However, you can change the part of the URL after the # sign, which is called a fragment, for example:

 window.location.hash = 'something'; 

Snippets are not sent to the server (for example, Google itself cannot determine the difference between http://www.google.com/ and http://www.google.com/#something ), but they can be read by Javascript on your page, In turn, this Javascript may decide to execute another AJAX request based on the value of the fragment, as the site with which you are associated does.

Answer 5

This is achieved by rewriting the URLs rather than obfuscating the URLs, which is not possible.

Another way to do this, as already mentioned, is to change the hashtags with

 window.location.hash = "/2131/" 

Answer 6

No, because it will open gateways for phishing. The only part of the URI that you can change is the fragment (all after # ). You can do this by setting window.location.hash .

Answer 7

You cannot change the entire URL in the address bar without redirecting (think about security issues!).

However, you can change the hash part (after # ) and read: location.hash

ps. prevent onclick link redirect from link:

 $("#link").bind("click",function(e){ doRedirectFunction(); e.preventDefault(); })