3

In facebook, if a user opens a chat dialogue window, it will remain there no matter what page he/she visits. For example, one might be on their home news feed page and then navigate to say, their profile or inbox messages and the chat "div" will still be there.

The dialogue window itself is simply just a div with the following attributes:

<div class="fbNubFlyout fbDockChatTabFlyout uiContextualLayerParent" role="complementary" data-ft="{&quot;tn&quot;:&quot;+M&quot;}" aria-labelledby="u_0_38" style="max-height: 331px;">

Visually speaking, the whole page will reload while the chat box remains unaffected. How does Facebook do this?

CBroe
  • 91,630
  • 14
  • 92
  • 150
Notaras
  • 611
  • 1
  • 14
  • 44
  • [Popstate API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries), [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) are all technologies that can achieve this. – Sebastian Simon Oct 26 '15 at 04:17
  • If you look at the HXR traffic [firebug or JS debugger on chrome, firefox ecc] you'll see that when you change page on FB you don't really change url, but only make an XHR request that makes the content of the page change. thus, since no page change has occourred, all the layers [top menu, chat divs ecc] will remain there. I think that Fb can be called a big big Single Page Application – user1555320 Oct 26 '15 at 10:22

2 Answers2

2

You got a good start on the answer with this:

Visually speaking, the whole page will reload

True. But technically speaking, there is no full reload.So really, there's no trick to making the chat window stay open - why would it not? The trick is how to make the page seem to change when it's all a single page application.

Below are the main reasons that the page appears to be reloading and a brief explanation of how it's done. Pardon me if it's too simplistic.

  1. The URL in the address bar changes

This is done using the HTML 5 history API. This allows you to change the current address, without a traditional page change. These URIs will also appear in the history as if they were hard-navigations.

It's a very useful feature, for example, it means that a user can jump back into the same view with just the URI.

  1. New page content appears

When you click a link, the page javascript sends a request to the server for the information. This type of request in the background is known as AJAX. In fact, in many cases, it's the same data that you would get if you went directly to the page. When the response get back from the server, the javascript updates the page that you see on the screen.

ColBeseder
  • 3,579
  • 3
  • 28
  • 45
-2

I used to know how to do something very similar using iframe tags. I would just use anchor tags and a little JS to simply change the webpage displayed inside the iframe and all the content not in the frame should stay the same.

This link is to another post with a similar problem: Link

Revision: Like I said above, iframes can be used to display other webpages without reloading the current page, if you have a iframe inside the body content section of your html you can have it load another webpage like this

<iframe src="http://www.bing.com" style="width: 90%; height: 300px"></iframe>

This is an example from this site: Link use javascript code to simply change the src link inside the tag to change the displayed content

Community
  • 1
  • 1
34638a
  • 60
  • 1
  • 5
  • 1
    it was meant to be a solution but I did not explain that clearly, the revision should make this more clear – 34638a Oct 26 '15 at 10:16
  • noone uses those tricks anymore; with backbone, Angular you can build a Single Page Application with ease. – user1555320 Oct 26 '15 at 10:23