Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

If anybody has ever noticed that when you open a image in Facebook something like this happens:-

suppose you are at your homepage on Facebook:- the URL is https://www.facebook.com/

now if you open a image it gets opened in new modal like window and URL changes to:- https://www.facebook.com/photo.php?fbid=10151125374887397&set=a.338008237396.161268.36922302396&type=1&theater

As far as I know in any common case a modal overlay would have kept the url in the address bar the same , My question is how does facebook / pintrest achieve this behaviour of not re-loading the whole page but still achieving the change in the address bar.

Is there any jquery or javascript plugin for this?

share|improve this question

2 Answers 2

up vote 5 down vote accepted

They use the HTML5 history API to update the URL shown in the address bar without actually navigating to a different page.

Further information:

Since this API is not available in all browsers (older ones, especially IEs, don't have it) it's usually a good idea to use a wrapper such as History.js which either turn the calls in no-ops in those browsers or emulate them by using the hash part (after #) of the URL.

share|improve this answer
    
Some code example thief ? –  Abhishek Nov 30 '12 at 12:57
    
This is P.se, not SO :p But there's an example on the MDN site I linked to. –  ThiefMaster Nov 30 '12 at 12:58
    
yeah i saw it , you edited it when i was posting ^_^ , sorry –  Abhishek Nov 30 '12 at 13:00
    
Trello also uses the History API and pushState extensively. –  MobyD Nov 30 '12 at 13:07
    
thanks for throwing light on History api, I will try to implement it in my project... –  manish Nov 30 '12 at 13:34

They load a single page javascript application on page load, which takes care of all your requests within the app if you don't refresh the page. All dynamic data is retrieved using AJAX and showed to the user using the application functions. For images, the application creates a lightbox kind of gallery.

Now, usually you goto the home page and facebook loads the application and shows you the home page.

But if you goto another page like a photo page, either the page can be rendered server side, which has the white background. But they can also load the javascript app and show the image in the white background also.

Now the reason the url changes is, they use the HTML5 history api to change the url using javascript.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.