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?


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.

  • Some code example thief ? 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. Nov 30 '12 at 12:58
  • yeah i saw it , you edited it when i was posting ^_^ , sorry Nov 30 '12 at 13:00
  • Trello also uses the History API and pushState extensively.
    – Will
    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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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