Changing URL without refresh?

Question

I found an app on the internet inside of which, when you click A link it will redirect to A page without refreshing the whole place and changing the url address bar, I know

Answer 1

using the history api you could do something like this

  if (history && history.pushState){
     history.pushState(null, null, '/new/url');
  }

try it in your browser now with chrome js console

thats all it takes (maybe a little more, but thats the basis of it

read more in http://diveintohtml5.info/history.html

Answer 2

This is commonly done by either using the latest HTML5 history API, or, for old browsers, changing the hash in the URL. Have a look at this article: http://dev.opera.com/articles/view/introducing-the-html5-history-api/.

Whenever some user action prompts a new page, instead of loading the new page (with a new URL), the page retains the common properties (like say, the header, footer, or say, in a eCommerce site, the shopping cart widget), and the remaining contents are fetched asynchronously through Ajax. Once the new content is fetched, the UI is changed accordingly, and a new state pushed into the History stack, and changing the URL accordingly. Through the data attribute used here as a dictionary, you store information about what to show when the user navigates forward/backward and arrives at that page again. Something like this:

history.pushState({mydata1: data, mydata2: anotherData},"newTitle",newURL);

So when the user presses the Back button of the browser, that entry is simply popped off the history stack, and from the data attributes of the new entry in the top of the stack, the new page is shown. The current page can be updated as well:

history.replaceState({mydata1: data, mydata2: anotherData}, "anotherTitle",newURL);

All information regarding the current page can be obtained from state:

myState = history.state;

If you have observed, Facebook does the same thing. When you click the Home button, or go a friend's profile, no new page is loaded. The notification ticker on the right remains as it is (instead of loading again for the new page), if you have any chat box opened, it stays as it is. This is because the page doesn't reload to the new page (in which case, all widgets, including chat and ticker should reload as well), only the URL is changed dynamically, and the new content is fetched and displayed through Ajax.

If you view Facebook in IE8, which doesn't support History API, you will find it still works, but the URL change behavior is different. It is because they fall back on the good old way of changing URLs by changing the hash.

Answer 3

The simplest solution is to use a frame or iframe and set the target attribute of the a to the frame (or just click a link within a frame). This will show the new page within the frame and with the frameset-html's address in the location bar.

Answer 4

If you only need to print some info, doing it after de dash # symbol will not reload the document

Answer 5

You can use HTML5 History API to to change the URL without refreshing the page, check out this tutorial from Mozilla https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Also check out https://github.com/browserstate/History.js for cross-browser solution

The jQuery PJAX plugin https://github.com/defunkt/jquery-pjax will help you do what you have mentioned, it will help to update the content and change the URL without refresh.

Here is an example: http://pjax.heroku.com/
Source code for this example is available here: https://github.com/defunkt/jquery-pjax/tree/heroku