像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。