Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How does FaceBook Change Pages?

    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!

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #6
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    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
    Last edited by barkermn01; 11-07-2008 at 04:29 PM.

  • #7
    hjb
    hjb is offline
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by barkermn01 View Post
    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.

    Quote Originally Posted by barkermn01 View Post
    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
    The 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.

  • #8
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by hjb View Post
    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
    Last edited by barkermn01; 11-20-2008 at 12:53 PM.
    Working towards a Internet where we don't have website just browser applications Kill the Hyper-link and say hello to 3D Games in the browser :)

  • #9
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,459
    Thanks
    1
    Thanked 23 Times in 21 Posts
    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.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #10
    hjb
    hjb is offline
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

    Code:
    /profile.php?id=123456#/home.php?
    I urge you to read the following:

    http://docs.sun.com/source/816-6408-...on.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.
    Last edited by hjb; 11-24-2008 at 09:56 AM. Reason: Clarification of Facebook steps

  • #11
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by hjb View Post
    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

    Code:
    /profile.php?id=123456#/home.php?
    I urge you to read the following:

    http://docs.sun.com/source/816-6408-...on.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?...07&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
    Working towards a Internet where we don't have website just browser applications Kill the Hyper-link and say hello to 3D Games in the browser :)

  • #12
    hjb
    hjb is offline
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #13
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Lol this thread is frustrating me. Barker has been right the entire time and I sympathize with him. Adding a + rep
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #14
    hjb
    hjb is offline
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by itsallkizza View Post
    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.

  • #15
    hjb
    hjb is offline
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by animedude123 View Post
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •