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:
- http://diveintohtml5.info/history.html
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
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.
5
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.