How to load a page without reloading it?

Question

Possible Duplicate:
Modify the URL without reloading the page

I know the subject is a little bit odd.

When I go to http://www.heroku.com/how/relax and click other menus (Deploy, Connect, and...so on), I see that the browser changes its url, but it feels like Ajax.

What is this technique called?

shadyabhi · Accepted Answer · 2012-02-01T02:04:24.830

4

This technique is called using javascript & DOM to change the content of the page with fadeIn() and [fadeOut()][2] animations (for jQuery).

For page location change:

You have to use HTML5's pushState() method to change browser history.

window.history.pushState(data, "Title", "/new-url");

Doc says:

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

The last argument is the new URL. For security reasons you can only change the path of the URL, not the domain itself. The second argument is a description of the new state. And the first argument is some data that you might want to store along with the state.

edited Feb 01 '12 at 02:04

answered Feb 01 '12 at 01:49

shadyabhi

16,675
26
80
131

That doesn't explain the URL change. – millimoose Feb 01 '12 at 01:54
HTML5's pushState() method does that. Oh, may be you commented while I was updating.. – shadyabhi Feb 01 '12 at 01:55

Brad Christie · Answer 2 · 2012-02-01T02:01:37.573

2

The offending code:

historyAPISupported : function(){
  return (typeof window.history.pushState !== 'undefined')
},

clickTab : function(tab){
  var humanTab = tab.replace('js-', '')
  var newUrl = document.location.pathname.replace(/\/(how.*)/, '/how/' + humanTab)
  this.activateTab(tab)
  if (this.historyAPISupported()){
    window.history.pushState({ path: newUrl }, null, newUrl)
  }else{
    if (document.location.pathname != newUrl){
      document.location.href = document.location.href.replace(/\/(how.*)/, '/how/' + humanTab)
    }
  }
},

Best I can tell it still uses anchors, but takes advantage of the browser history to make changes (You can quickly see your "progress" bar show a hash of the location, yet browser url changes).

Besides all of this, the contents are loaded right from the start and the contents are just faded in and out of view.

Regarding the actual question, I don't think there's a specific name for it. AJAX is loading content behind-the-scenes, transitions makes the visual effects, and some crafty JS makes the link appear to change.

edited Feb 01 '12 at 02:01

answered Feb 01 '12 at 01:54

Brad Christie

100,477
16
156
200

The link does change, not just in appearance. The page does load, even if many contents are pre-loaded. You can tell by the icon for the page reloading on every menu item click. – Travis J Feb 01 '12 at 02:00
@Travis: Must be your browser, because I see all the contents loaded under various `/html/body/section/div/article/aside` elements that are named in relation to the tabs, then styled/animated to show/hide. – Brad Christie Feb 01 '12 at 02:03
I am using google chrome. However, upon further inspection is seems that the browser is merely being tricked into looking like it reloads, because when I track the network activity it is clear that the page is in fact not reloading all the resources when each link is clicked (of the set connect, etc.). In conclusion, I would have to agree that the transitions are done in code and not through reloading. – Travis J Feb 01 '12 at 21:51

score 2 · Answer 3 · answered Feb 01 '12 at 01:56

2

It's likely using the pushState() API to handle the browser URL change to "fake" navigation. The new content can be preloaded or fetched over AJAX.

answered Feb 01 '12 at 01:56

millimoose

39,073
9
82
134

How to load a page without reloading it?

3 Answers3