javascript - 像 facebook 聊天一样的窗口

Question

Facebook 聊天窗口保持打开、不变，以刷新页面，甚至在我们更改页面时。如何重现类似的东西？尝试使用框架集，但它不起作用。

即使在网站链接上刷新页面或 clocar 之后，如何保持 div 打开类似于内部的窗口？

Answer 1

像他们一样，你可以试试——

1. 数据在 Facebook 页面之间共享。可能是 HTML5 localStorage？饼干？我不确定。

2. 如果您注意到，它们不会“刷新”页面，它们会 ajax 刷新页面上的内容以供后续加载。（当然，除非您手动导航到同一页面。）

3. 最后，它所有的CSS主要是一些z-index投入使用。

我希望这三个足以让你开始。

Answer 2

我会调查 qjuery-qjax：https ://github.com/defunkt/jquery-pjax

从他们的文档中：

pjax 的工作原理是通过 ajax 从服务器获取 html，并用 ajax 的 html 替换页面上容器的内容。然后，它使用 pushState 更新浏览器的当前 url，而无需重新加载页面的布局或任何资源（js、css），从而呈现出快速、完整的页面加载的外观。但实际上它只是 ajax 和 pushState。

Answer 3

我不认为 Facebook 的整个页面都已加载。每个链接都有它自己的“目标”。他们中的大多数人获取一个页面（我认为只是 AJAX）来显示，其他人只是更改屏幕的某些部分。假设你有两个 div。一个 div 是聊天 div。定位固定和所有，z-index 为 100，它将始终保持在顶部。页面的其余部分是另一个 div。在这个 div 中，您可以使用 AJAX 加载某些页面，而无需刷新整个屏幕。

与重新加载屏幕一样：您可以轻松保存（也使用 AJAX）用户是否关闭或打开了聊天屏幕。只需在名为“聊天”或其他名称的数据库中创建一个表，然后当打开聊天屏幕时，您在该表中添加一个条目，其中包含“person_1”、“person_2”、“lastmessage”和“active”。当他们关闭聊天时，您可以将“活动”字段设置为 false。然后，每当有人加载整个网站时，您都会检查桌面聊天是否有活动聊天，并在有任何聊天时显示它们。