像facebook聊天的窗口

Question

Facebook聊天窗口保持打开状态，不变，刷新页面，甚至更改页面。如何重现类似的东西？尝试使用frameset，但它没有用。

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

Answer 1

喜欢他们，你可以试试 -

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

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

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

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

Answer 2

我认为Facebook的整个页面都没有加载。每个链接都有自己的“目标”。他们中的大多数都会获取一个页面（我想简单地用AJAX）来展示，其他人只是改变一些屏幕的部分内容。所以说，你有两个div。一个div是chat-div。定位固定和全部，z-index在100，它将始终保持在最顶层。页面的其余部分是另一个div。在这个div中，您可以使用AJAX加载某些页面，而无需刷新整个屏幕。

与重新加载屏幕一样：您可以轻松保存（也使用AJAX）用户是关闭聊天屏幕还是打开它。只需在名为“聊天”的数据库中创建一个表，然后在打开一个聊天屏幕时，在该表中放入一个带有'person_1'，'person_2''lastmessage'和'active'的条目。当他们关闭聊天时，您可以将“active”字段设置为false。然后，每当有人加载整个网站时，您检查表格聊天以查看活动聊天，并在有任何内容时显示它们。

Answer 3

我会研究qjuery-qjax：https://github.com/defunkt/jquery-pjax

来自他们的文档：

  

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