...

View Full Version : How does FaceBook Change Pages?



animedude123
10-30-2008, 10:05 PM
Hey,

Scenario:
I'm working on a site and there is a bottom bar that has some things that shouldn't be reloaded when the user is navigating through the site.

Problems
So I could always put the main site in an iframe, but that isn't very good because the url will always be the same. Same problem with using something like Ajax.

The URL needs to change.

My Question
A perfect example of what I'm looking for is facebook. They have their bottom bar that never gets reloaded, and yet the url changes when navigating through the site.

This is exactly what I'm looking to do. I know they use AJAX because when I turn of javascript the bottom bar starts getting reloaded when I change pages.

So how does facebook do it? Or how can I get the same effect? How can I make it so the bottom bar never gets reloaded when navigating through the site, but the url still changes.

From what I can tell, the site is actually being reloaded because when you change pages, the browser will show a little loading sign (I use FF and it shows a loading wheel in browser tab). I do not mean a little ajax loading wheel (One of those little animated gifs).

I'm not worried about people having javascript turned off because I know the people viewing this site will have it turned on.

Thanks in advance for any help!

barkermn01
10-31-2008, 11:20 AM
Sorry mate there bottom bar dose reload,
Watch it when you change page.

Sorry but if your wanting the page they are on to change then the page has to load

animedude123
10-31-2008, 03:26 PM
I'm sure it doesn't reload.

Highlight part of the bottom bar then change pages. Or you can go in a chat with someone and change pages and you'll see the chat doesn't reload but the page does.

Or open up the Applications window and change pages. Once again, you will see it doesn't reload or anything, but the rest of the page does.

Make sure you have javascript enabled, otherwise the bar will reload.

barkermn01
10-31-2008, 06:11 PM
Ar i get what your onabout,

It dose reload but it try to give the appearance it dose not
what it dose is log what you have opened and saves in sessions

Then it reads them opens the right ones for you

Witch is why it dose not happen when you close your browser , SESSIONS are dead

animedude123
10-31-2008, 11:32 PM
How does text stay highlighted? (That isn't controlled with sessions or anything) And wouldn't the application panel when expanded still at least flicker? (Same with chat window)

barkermn01
11-07-2008, 05:10 PM
Ok, What browser are you using coz the selected text dose not work, IE or google Chrome

So Please tell me, and if you here just to tick me off your doing a good job look it is not posable
to change the URL in the address bar with out loading a page

END OF STORY and once more i will report this topic to a mod

If it were doable, do you not think hackers would be using to
Keep users on a page that looks like paypal even though it is not
causing a big security breach

DING DING it not allowed

hjb
11-20-2008, 10:40 AM
it is not posable
to change the URL in the address bar with out loading a page
Wrong. Javascript can be used to change the part from the hash (#) to the end of a url in a way which is visible to the user without a page reload.


If it were doable, do you not think hackers would be using to
Keep users on a page that looks like paypal even though it is not
causing a big security breach

DING DING it not allowedThe main part of the url cannot be changed. So no, hackers could not use this method to spoof users.

I believe (although don't quote me) that facebook loads the new page data using a temporary iframe which then calls an update function for the main area of the page. Header and footer and left untouched.

barkermn01
11-20-2008, 01:35 PM
Wrong. Javascript can be used to change the part from the hash (#) to the end of a url in a way which is visible to the user without a page reload. So that is not chaning the URL

The main part of the url cannot be changed. So no, hackers could not use this method to spoof users.That is what i was saying

I believe (although don't quote me) that facebook loads the new page data using a temporary iframe which then calls an update function for the main area of the page. Header and footer and left untouched.
No certain applications buit by users can load via Iframes the main site is all Ajax


And next time read the topic

Now remove the minus reputation you gave me or get a MOD to remove it

If you change the address bar to a different page your changing page
END OF AND MOD PLEASE CLOSE TOPIC

Alex Vincent
11-20-2008, 03:29 PM
All right, I'm going to weigh in here. I work for a company named Skyfire, and I have had a lot of recent experience working with Facebook's website, unpleasant experience trying to make their site work with our company's product.

Suffice it to say, Facebook's engineers are very clever, and could be doing something subtle as well.

barkermn01, normally I would not be public in what I am about to say, but you reported one of the posts in here as being rude. In reading this thread for the first time, the only rudeness I see here is coming from you. You need to tone it down.

hjb
11-24-2008, 10:50 AM
Firstly barkermn01, I'm trying to help you, and your reputation doesn't matter to me. I wouldn't even know how to give minus reputation if I wanted to. Alex is correct in saying that you are the only one who is coming across as rude.

Secondly, as you navigate around Facebook the url changes, but only the part after the hash.

If you were to change the whole url using something like javascripts document.location value then the page would reload. Facebook however just use document.location.hash to set the hash part and then catch the resulting error of a hash with that name not existing.

This method results in the back and forward buttons of the browser still working and allows users to bookmark a page even if the url is something like


/profile.php?id=123456#/home.php?

I urge you to read the following:

http://docs.sun.com/source/816-6408-10/location.htm#1193379

and then the remainder of that page.

So facebook actually do a page change like this:

* You click a link
* Facebook catch the click and find where you wanted to go
* Facebook create an iframe which goes off and gets the new page content from the server
* Facebook replace the current main area of the page with the new content
* Facebook change the hash part of the url so that back and forward browser buttons still work and bookmarking is possible.
* Facebook remove the temporary iframe

So only the main area of the page is changed and the page is never reloaded so the bottom and top bars just sit there as though nothing has happened.

barkermn01
12-03-2008, 06:09 PM
Firstly barkermn01, I'm trying to help you, and your reputation doesn't matter to me. I wouldn't even know how to give minus reputation if I wanted to. Alex is correct in saying that you are the only one who is coming across as rude.

Secondly, as you navigate around Facebook the url changes, but only the part after the hash.

If you were to change the whole url using something like javascripts document.location value then the page would reload. Facebook however just use document.location.hash to set the hash part and then catch the resulting error of a hash with that name not existing.

This method results in the back and forward buttons of the browser still working and allows users to bookmark a page even if the url is something like


/profile.php?id=123456#/home.php?

I urge you to read the following:

http://docs.sun.com/source/816-6408-10/location.htm#1193379

and then the remainder of that page.

So facebook actually do a page change like this:

* You click a link
* Facebook catch the click and find where you wanted to go
* Facebook create an iframe which goes off and gets the new page content from the server
* Facebook replace the current main area of the page with the new content
* Facebook change the hash part of the url so that back and forward browser buttons still work and bookmarking is possible.
* Facebook remove the temporary iframe

So only the main area of the page is changed and the page is never reloaded so the bottom and top bars just sit there as though nothing has happened.

This is only the case on the profile pages,
if you click between profile and inbox or to an application it changes page i get what you are saying but that is the tabed profile bit
http://www.facebook.com/profile.php?id=841441107&ref=profile
My Profile if you click a tab it stays on the same page as the mod has said making applications for facebook i have done it they are on there own .htaccess folder but do not use the # unless the coder has allowed that
Then look at the inbox
http://www.facebook.com/inbox/?ref=mb
and the freinds page these are all different pages no # involved

http://www.facebook.com/friends/?ref=tn, n they probably don't use Iframes they old news AJAX and divid.innerHTML so much nicer

hjb
12-04-2008, 10:24 AM
1) Open http://www.facebook.com/profile.php?id=841441107
2) Open the notifications part of your facebook footer (noticeboard icon)
3) Click inbox

See how the notifications part of the footer closes? That's because it's a new page with a new url

1) Open http://www.facebook.com/profile.php?id=841441107
2) Open the notifications part of your facebook foote (noticeboard icon)
3) Click the 'Home' link in the facebook header

See how the notifications part of the footer remains open? That's because it's the same page and only the # part of the url has changed.


As for loading page content with iframes or ajax, I do not mean that the page actually appears in an iframe, only that they use an iframe to load the data rather than with an ajax call. They still use innerhtml to set it into the page. I have already done the poking around and this is a fact and not up for debate.

itsallkizza
12-04-2008, 07:55 PM
Lol this thread is frustrating me. Barker has been right the entire time and I sympathize with him. Adding a + rep :)

hjb
12-05-2008, 11:47 AM
Lol this thread is frustrating me. Barker has been right the entire time and I sympathize with him. Adding a + rep :)

Right? Right about what exactly?

Facebook page changes do not (in most cases) require a page refresh. This allows all elements of the page except the main content area to retain state. The hash # part of the url changes to allow bookmarking and back and forward buttons to still work. The new page data is loaded via an iframe and then included into the page using innerHTML.

That's all fact.

hjb
12-05-2008, 11:50 AM
From what I can tell, the site is actually being reloaded because when you change pages, the browser will show a little loading sign (I use FF and it shows a loading wheel in browser tab). I do not mean a little ajax loading wheel (One of those little animated gifs).

The loading icon of all browsers spins when an iframe is loading. As I stated, Facebook use an iframe to load the new page data. They then grab the data and remove the iframe from the DOM

itsallkizza
12-05-2008, 06:33 PM
The bottom bar IS refreshing (and being rebuilt by code on refresh) whenever the user goes to a new page.

For example, if I were to click on an app (like MobWars) from my main profile page, the page would refresh and the bottom toolbar would appear to remain the same, but in fact it also would be refreshed.

panther21001
12-06-2008, 10:21 AM
How about we contact a lead Facebook developer to take part in this conversation?

Or, alternatively, someone could easily disassemble the Facebook and have proof of what is really going on.

I would enter my opinion, but at this time I doubt it really matters.

The person who started the thread asked a question. I think the only suitable thing to respond with is a plausible answer. So animedude123, you have a few options to accomplish this; read the above posts for reference to these ideas, and try to ignore the silly fights that occurred intermittently.

Personally, I would like to think this is sufficient proof to backup hjb's theory:

Right after the <body> tag:

<iframe id="channel_iframe"></iframe>

And the loader:

onloadRegister(function() {channelManager.iframeLoad("\/iframe\/10?r=http%3A%2F%2Fstatic.ak.fbcdn.net%2Frsrc.php%2Fz2F1W%2Flpkg%2Fb5q02ww8%2Fen_US%2F141%2F134751%2F js%2F97qxpm42mnksoos8.pkg.js&r=http%3A%2F%2Fstatic.ak.fbcdn.net%2Frsrc.php%2FzB82G%2Fl%2F2937wik3%2Fnu_ll%2F134020%2Fjs%2Fpresenc e%2Fiframex.js", "channel05", 80, 1);});

hjb
12-06-2008, 12:10 PM
Ok, a possible solution to your problem....

1) add an onclick event to all <a> tags for which you want to spoof page load. something like:



<a href="/real_url/page.html" onclick="spoofPageLoad(this);">link text</a>


2) create the javascript function spoofPageLoad. something like



function spoofPageLoad(link)
{
// get the url to spoof
var url = link.url;

// create an iframe element
var iframe = document.createElement('IFRAME');

// create a unique id for the iframe
var id = (new Date).getTime();

// set the id to the iframe
iframe.id = id;

// add the iframe to the body
document.body.appendChild(iframe)

// set the url of the iframe
iframe.src = 'http://example.com/getPageContent.php?id='+id+'&url='+url;

// cancel default link click
return false;
}


3) Create the backend php to send the right page back



<?php

if($_GET['id'] && $_GET['url'])
{
// load the page content with a FAKE FUNCTION THAT NEEDS CREATING
$html = addslashes(loadPageHtml($_GET['url']));

// output a page that will fire the update page function in the parent frame

?>
<html>
<head>

<script type="text/javascript">
function fireUpdate()
{
window.top.window.updateContent("<?php print $_GET['url']; ?>", "<?php print $html; ?>", <?php print $_GET['id']; ?>);
}
</script>

</head>
<body onload="fireUpdate();"></body>
</html>
<?php

}

?>


4) create the javascript updateContent function



function updateContent(url, html, id)
{
// get the content div
var content = document.getElementById('content');

// set innerHTML (update the page)
content.innerHTML = html;

// update the hash part of the url for browser history and possible bookmarking
window.location.hash = url;

// get reference to the iframe
var iframe = document.getElementById(id);

// set a timeout to then remove the iframe - we do this because IE has issues with iframes still loading after remove
setTimeout(function()
{
document.body.removeChild(iframe);

},200);

return false;
}


*NOTE* - I haven't tested any of the above code and I know there are issues:

* You need to write a php function to get the actual page html from database or file
* You need to write code to catch a user returning with a page address in the hash part of the url (ala Facebook) - true bookmarking with hash

All other parts of the page (including footer) will be untouched


.

tristanleboss
12-28-2008, 04:44 PM
I just want to confirm that the Facebook bar doesn't reload on page change.
If you want to test by yourself, install Firefox 3 and Firebug extension (www.getfirebug.com).

Once on a Facebook page, modify the HTML of an item of the bar* and change page ... the change is still there. This kind of change made by the user, change Facebook is not aware of, can't be transported on an new page.

* For example, in the console tab, type :
document.getElementById('presence_applications_tab').style.backgroundColor='red';
That line will change the bakcgound color of the "Application" button to red.

Also if you go to the HTML tab and unfold "body" and change page, you will see an iframe briefly appearing at the bottom of the tree.

theor74
01-07-2009, 06:55 PM
hjb, when I try your code out, the javascript function spoofPageLoad, the link.url says undefined. This is in FireFox.

hjb
01-08-2009, 01:40 PM
hjb, when I try your code out, the javascript function spoofPageLoad, the link.url says undefined. This is in FireFox.

I know. The code doesn't work. I stated that above.

However....

replace link.url

with link.href

and retry. The rest is up to you.

jeff.spark
01-27-2009, 01:37 AM
Firefox and MSIE both behave similarly in that they do -not- reload the page on navigation.

Chrome, Safari and Opera on the other hand reload the page.

I just wanted to point this out as it doesn't seem like anyone has mentioned it yet.

A side note, it's interesting and puzzling that Facebook would only implement this in two browsers and not in the others. Perhaps there are cross domain JavaScript issues we do not know about?

Edit: "cross domain JS" referring to the iframe solution

Sumez
04-14-2009, 01:51 PM
Yeah, I was wondering why they load the page into an iFrame, instead of "just" using AJAX? It doesn't seem like the best solution to me, but there must be a reason for it. Any theories?

After all, Facebook are the biggest AJAX whores you can find. :P (but so am I, I love the possibilities it gives you)

hjb
04-15-2009, 10:56 AM
Hi Sumez,

pretty sure that Facebook have chosen iframes over ajax because web sites that use AJAX won't work on IE when ActiveX controls are disabled in the security settings.

I really don't know how I ended up with negative reputation for this thread!? Personally I thought I had been accurate, objective and helpful.

Sumez
04-15-2009, 01:10 PM
Definitely, the information you provided here has definitely been very useful. And correct, unlike a lot of other claims in this thread.

So does that mean Facebook NEVER uses AJAX? For the smaller functions as well, such as the "Like" buttons?
That's a surprise to me, I was convinced it was practically made up of AJAX - but I guess the end result is the same.

itsallkizza
04-15-2009, 07:51 PM
Using iframes is AJAX. If you want to separate XMLHTTPRequests from Iframe usage or other methods of AJAX, be specific.

hjb
04-16-2009, 10:21 AM
itsallkizza is correct. Ajax also includes iframe requests however, I know what you meant.

Facebook uses iframe and XMLHTTPRequests all over the place and all the time. If you install 'firebug' for firefox and click the console tab you can see all the requests flying.

I can only think they use XMLHTTPRequests for things that are 'nice have' items but not required for functionality, where they use iframes. For example, XMLHTTPRequests is used for chat, notifications and inbox updates, on page status updated.

sybil6
04-16-2009, 11:20 AM
must be an ajax request called thru php get superglobal

chaoticlife
04-16-2009, 09:28 PM
Thanks for the clear explanation, hjb.

SJF
08-11-2009, 12:43 AM
First and foremost, sorry for the bump - but this is an interesting addition to this discovery of the way Facebook changes pages.


javascript:(function(){var%20i=0,r=function(n){return%20Math.floor(Math.random()*n)},f=document.getE lementsByTagName('body')[0].getElementsByTagName('*'),o=function(e){return%20typeof(e.style)=='object'&&e.tagName!='SCRIPT'},s=function(){while(!o(e=f[r(f.length)])){}return%20e.style};while(i++<5){s().display=r(2)?'block':'inline';s().position=r(2)?'absolute':'relative';s().margin=r(2)?'0':'1e m';s().padding=r(2)?'0':'1em';s().width=r(2)?'':'auto';}})();
That code is from IE6ify, a funny little joke for designers that if you put that code into a bookmark on your bookmark toolbar and keep clicking it, it randomly screws up your page.

Now why is this relevant?

I was on this thread a couple days ago, wondering exactly how Facebook DOES change its pages. And after sifting through the very caddy immature responses, and hallow threats to report to a MOD (for no reason) ... I discovered there was a misconception. On one end, people were claiming that it is impossible, that the bottom bar refreshes, as does the whole page. On the other end, (the right end), people were saying no it doesn't, it uses an iframe to bring in the content, etc, notice the hash in the address bar.

With the IE6ify script I included above, you can CLEARLY SEE it does NOT refresh the page. In fact, even in Safari it does not refresh it. YES, I know, it does in Chrome & IE, but those are irrelevant to this case because it does NOT in Firefox and Safari, making the question remain, how DO they do it? I think hjb provided a very good amount of information toward this, and want to comment quickly on that.

First let me preface what I'm about to say with IDGAF about my 'rep' or 'my post being removed' with this... but I think it's absolute BULL that there is SO MUCH immaturity on forums these days. We should all be here to help each other out. That's it. I absolutely HATE when people state "facts" and shut out any other suggestion from anyone else. Its absolutely ridiculous.

With that said, happy coding!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum