How are the facebook chat windows implemented?

问题:

On Facebook you can browse the site without affecting the floating chat windows. Seems like if the main page was inside an iFrame and the footer and chat windows where floating outside.

alt text http://www.k-director.com/blog/upload/FacebookChat03.gif

Is the main content inside an iframe or are the footer and chat windows the ones inside an iframe?

The later doesn't seem possible because int this case when you click in a link in the main page everything would have to reload, including the footer iframe.

If you refresh the page the chat windows are reloaded, but if you browse the site by clicking links they are not.

Thank you.

回答1:

If you install FireBug and enable the net monitor for Facebook, you'll see that when you click most links inside the application, you're not doing a full page refresh, but rather an AJAX call which updates the page with the new content.

It looks like a new page, but in reality you're on the same page with just about everything but the chat-bar replaced.

回答2:

Probobly just an absolutely positioned div, containing a scrolling div for the content. Ajax would provide the content.

回答3:

The chat windows do indeed refresh when you load a new page, they maintain their viewstate however (open/close/chat history).

回答4:

It's an absolutely positioned div, positioned at the bottom of your browser window. It's not hard, I cloned the Facebook chat for ClockingIT from scratch in a weekend.