CODEWITHSUNDEEP
javascriptjqueryajaxfacebook
Jhon Andrew
Jhon Andrew

Reputation: 188

How does facebook navigates to a photo(changes the window.location) but the past content remains?

I just noticed when I click a photo on my facebook news feed, the window location changes, the photo appear's, but the content from the previous page is still at the back of the photo. You can see it because the background of the photo viewer is transparent.

How can this be achieved?

Upvotes: 1

Views: 121

Answers (2)

Phil H
Phil H

Reputation: 20141

In the future it will be using HTML5's history API. But for cross-browser compatibility and backward-compatibility use the history.js library.

Pre-HTML5, the way to set the location without causing a page refresh is to append a # anchor position to the url, as though you had moved to an anchor position (traditionally used to move to and link to a specific paragraph on a page), e.g. url/to/page#someposition.

This generalises to representing a page state in the anchor; for example, a specific message in gmail has the URL https://mail.google.com/mail/?shva=1#inbox/2h42c4ahe7fge7 etc.

If you use history.js, you should be able to easily upgrade to pushState etc as and when they become widely supported.

Upvotes: 0

Koen Peters
Koen Peters

Reputation: 12916

Well. the URL changes to something like this: /photo.php?fbid=10150643780577073&set=a.446526812072.240769.709452072&type=1&theater

There is enough information in the query string to know what page the user came from. This information is used to display the photo in the foreground and to include the original page in the background. So both pages use some if facebooks backend code to generate the html frontend and in the case of the photo.php page include something extra: the forground picture plus the necessary css & scripts.

Upvotes: 1

Related Questions