当用户导航到不同的页面时，facebook如何保持聊天窗口打开

How does facebook keep the chat window open when a user navigates to different pages?

本文关键字：facebook 何保持 聊天 窗口 导航 用户      更新时间：2023-09-26

在facebook中，如果用户打开一个聊天对话窗口，无论他/她访问哪个页面，它都会保持在那里。例如，一个人可能在他们的主页新闻推送页面上，然后导航到他们的个人资料或收件箱消息，聊天"div"仍然在那里。

对话窗口本身只是一个div，具有以下属性:

<div class="fbNubFlyout fbDockChatTabFlyout uiContextualLayerParent" role="complementary" data-ft="{&quot;tn&quot;:&quot;+M&quot;}" aria-labelledby="u_0_38" style="max-height: 331px;">

从视觉上讲，整个页面将重新加载，而聊天框不受影响。Facebook是如何做到这一点的?

你有一个很好的开始的答案:

从视觉上看，整个页面将重新加载

正确的。但从技术上讲，没有完全装填。所以实际上，没有什么技巧可以让聊天窗口保持打开状态——为什么不呢?关键在于如何使页面看起来在单页应用程序中发生变化。

下面是页面重新加载的主要原因，并简要解释了它是如何完成的。如果这太简单了，请原谅。

  1. 地址栏中的URL发生了变化

这是使用HTML 5历史API完成的。这允许您更改当前地址，而无需传统的页面更改。这些uri也会像硬导航一样出现在历史记录中。

这是一个非常有用的特性，例如，它意味着用户可以只使用URI跳转到相同的视图。

  • 出现新的页面内容

    • 当您单击一个链接时，页面javascript向服务器发送一个获取信息的请求。这种类型的请求在后台被称为AJAX。事实上，在许多情况下，如果您直接访问该页面，您将获得相同的数据。当响应从服务器返回时，javascript会更新屏幕上显示的页面。

    我曾经知道如何使用iframe标签做一些非常类似的事情。我只会使用锚标记和一点JS简单地改变网页显示在iframe和所有的内容不在框架应该保持不变。

    这个链接指向另一个有类似问题的帖子:link

    修订:就像我上面说的，iframe可以用来显示其他网页，而不需要重新加载当前页面，如果你在html的body content部分有一个iframe，你可以让它加载另一个网页，像这样

    <iframe src="http://www.bing.com" style="width: 90%; height: 300px"></iframe>

    这是一个来自这个网站的例子:链接使用javascript代码简单地改变标签内的SRC链接来改变显示的内容

    相关文章：