像facebook聊天的窗口

Question

The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.

How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?

Answer 1

Like them, you can try -

1. The data is shared between facebook pages. Probably HTML5 localStorage ? Cookies? I'm not sure.

2. If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)

3. Finally, its all CSS mainly some z-index put to use.

I hope those 3 are enough to get you started.

Answer 2

I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.

As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.

Answer 3

I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax

From their docs:

pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.