2

I really wonder why facebook and google can change the url without reloading the page? they just change the block or content in their site.

I notice that when I am using facebook, when click on the "new feed" the url is "http://www.facebook.com/" and the page didn't reload, then i click on "messages" the url changed to "http://www.facebook.com/messages/" and the page still not reload just change the "content" block of the site.

So how do I change url without reloading the page?

edit: i got the answer.
there are 2 cases here:

  • browser support html5 (Firefox 3.6 + etc.): using html5 history. (example: www.facebook.com => www.facebook.com/messages )
  • browser dosn't support html5 (IE6, IE7, IE8 etc.): using hash tag (#) (example: www.facebook.com => www.facebook.com/#!/messages )

hope this help to who have doubt like me.

Alwayz Change
  • 225
  • 1
  • 4
  • 13

4 Answers4

8

Have you looked into the history API for Javascript?

http://diveintohtml5.ep.io/history.html

EDIT: You could also use mod_rewrite with apache and then, but that would cause a refresh.

Or there is this JQuery Plugin

http://www.asual.com/jquery/address/

DanBeale
  • 310
  • 4
  • 15
Manual5355
  • 981
  • 10
  • 27
  • is it HTML5? so what about IE? – Alwayz Change Sep 10 '11 at 15:12
  • 1
    @Alwayz Change: There is also https://github.com/balupton/History.js which has fallback for HTML4. – pimvdb Sep 10 '11 at 15:23
  • @pimvdb, thank for link, i'll try it, because i really need it, i build a website that full of ajax. i divide the web page into block, and load it block by block, so i need to find the way to change url. many thanks – Alwayz Change Sep 10 '11 at 15:27
  • I would suggest using modernizr to check for History API support, and then if it doesn't use the @pimvdb's suggestion as a fallback. You might also look into yepnope (http://yepnopejs.com/) for loading your fallback. – Manual5355 Sep 10 '11 at 15:39
2

The URL usually changes to http://facebook/#!messages, so the change of the "fragment" URL part doesn't make the browser reload the page. Instead, there is some JavaScript library that watches fragment changes and make appropriate requests in order to reload the page content.

The usage of #! is almost becoming a "standard" for doing these things, I've seen this used elsewhere (eg. on Twitter). I don't remember if they all use the same library or just the naming convention, but you should be able to dig about it on the fb/twitter developers pages.

redShadow
  • 6,687
  • 2
  • 31
  • 34
  • i am not confuse about it, it is "http://www.facebook.com/messages/" not "http://facebook.com/#!messages" , I am using facebook right now. it is actually change the url not the hash. – Alwayz Change Sep 10 '11 at 15:51
  • That's strange.. I tried again, and it goes to "https://www.facebook.com/#!/messages/", with the hash-bang.. Also, it is surprising to me that the browser allow changing the URL without reloading the page (think about the security issue in allowing to do so..) – redShadow Sep 10 '11 at 16:06
  • I got it @redshadow, because ur browser dosn't support html5. i tried with IE8 it change to www.facebook.com/#!/messages as what ur said. but not for firefox 4.0 (im currently using it) – Alwayz Change Sep 10 '11 at 16:20
  • You are right, I just tried with firefox 6, and it actually changes the URL as you say.. I'm investigating what it does actually do (and I'm gonna try creating a page that changes its URL to `https://paypal.com/login` :P) – redShadow Sep 10 '11 at 19:35
  • I just found this https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919 (linked from http://stackoverflow.com/questions/4120647/how-facebook-load-pages) that could be a good point to start digging :) – redShadow Sep 10 '11 at 22:30
  • ahh !! great idea, change to paypal.com or facebook.com or ebay.com .. lol,, anyway, thank for the link to facebook engineering, it is very interesting ^_^ – Alwayz Change Sep 11 '11 at 08:46
  • If you use Google-Chrome the url is just http://facebook.com/messages so I think they use the History API on browsers that support it. Internet Explorer uses http://facebook.com/#!/messages – Manual5355 Sep 11 '11 at 14:13
0

I code on JSBin.com, mainly use CSS and HTML (Abandoned Javascript loooong time ago) and have a question. For example a page's URL is http://www.codingrules.com/ Well, using HTML, How can I change that URL to for example http://www.ilovecoding.com

  • If you have a new question, please ask it by clicking the [Ask Question](http://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. – greg-449 Apr 12 '15 at 15:43
0

You could look into the Content-Location HTTP header for this purpose. See here for more info.

FtDRbwLXw6
  • 27,774
  • 13
  • 70
  • 107
  • @drrchknlsn i have tried with Content-Location already, it doesn't work, i also look at facebook header after retrieve the content, it don't have content-location. – Alwayz Change Sep 10 '11 at 15:14