Javascript 打开项目网页'；在顶部'；像Twitter这样的提要页面

Twitter有以下我想要复制的UI行为：

一个你可以向下滚动的无止境提要主页

如果你点击一条推文，它会打开一个专用的URL（例如）

这条推文似乎是原始提要“顶部”的一个嵌入页面/部分，您仍然可以看到它的边缘，但阴影较深

如果您单击关闭嵌入的tweet元素（即阴影区域），您将在同一点（即页面未刷新）恢复到原始提要

请注意，如果tweet URL在一个新选项卡中打开，那么作者的个人资料页面将形成阴影背景，而不是主提要页面。因此，只有从访问tweet页面时，才会继承主提要背景

---

在web设计术语中，这种设计方法是否有一个正式的名称/定义，可以帮助我确定合适的解决方案？我假设它有一个服务器端维度。

我认为Twitter中发生的事情是，弹出的tweet加载的内容与它自己独特页面中的tweet加载的内容相同；并不是说模态有唯一的URL

如果使用Angular，则可以将相同的内容注入或插入，并且可以使用特定数据的ID将模式内容链接到独立页面以加载该内容

编辑以添加：

以下是推文流中的推文的源代码，在它作为模式弹出之前：

 <div class="js-tweet-text-container">
  <p class="TweetTextSize TweetTextSize--normal js-tweet-text tweet-text" lang="en" data-aria-label-part="0">
Does anyone remember a 1990s TV show about a folklore prof investigating urban legends, shown on weird night on channel 4 <a href="/hashtag/folklorethursday?src=hash" data-query-source="hashtag_click" class="twitter-hashtag pretty-link js-nav" dir="ltr"><s>#</s><b>folklorethursday</b></a></p>
</div>

有人记得上世纪90年代在第四频道“怪异之夜”播出的一个关于一位民俗学教授调查城市传奇的电视节目吗

以下是tweet在twitter提要前显示为模式时的URL：

---

标签上有太多的事件侦听器，很难看到哪一个是指向tweet的链接。

你的问题有三个方面。让我们首先深入了解实现所有功能所需的技术，然后简要讨论Twitter如何利用该技术

TL；DR？Twitter使用与的组合来发挥其魔力

---

技术和一点背景知识 （a）在不刷新页面的情况下更改URL（列表中的2和4）
这有一个由现代浏览器实现的解决方案

window.history.pushState(state, title, URL);
window.history.replaceState(state, title, URL);
window.addEventListener('popstate', (event) => { /* use event.state */ });

前两个函数允许您模拟用户导航到

URL

。第一个将向导航历史记录中添加一个条目，而第二个将替换当前条目。这会影响用户在浏览器中使用后退和前进按钮时发生的情况

当用户向后导航或使用模拟此操作时，将触发

popstate

事件，并且可以通过

event.sate

访问传递到

pushState

的

状态。
state
可以是任何对象，因此这对于存储（比如）页面标题（更新页面）、滚动位置或任何您想要的内容都很有用

（b）直接加载内容
由于条目保存在浏览历史记录中，因此用户有可能在关闭选项卡甚至浏览器后直接访问此URL。他们还可以共享URL并让其他人直接访问。在这些情况下，将不会发生
popstate
事件，只需向web服务器请求传递给
pushState
的
URL
。因此，URL必须对服务器有意义

在这种情况下，Twitter显然会加载海报简介作为背景。这取决于您的用例，您希望页面是什么样子。什么都行

（c）异步加载内容（列表中有3个）

回到（a）一段时间。Twitter不仅会更改URL，还会加载tweet、该tweet的元数据并对其进行回复。然后在模式弹出窗口中显示

同样，还有一个用于异步加载内容的API1:。特别是，对象及其功能是令人感兴趣的。这可用于向服务器发出请求并获取内容，而无需完全重新加载页面

值得一提的是，正在开发一种新的API:。在撰写本文时，所有现代主流浏览器都提供了基本的支持，但仍处于开发阶段

获取内容后，它可以以您喜欢的任何方式显示在页面上。JavaScript可用于随意创建、删除和修改元素


你问题中的一个例子：Twitter
现在所有的技术都摆在桌面上了，让我们总结一下Twitter的功能

当用户单击其提要中的tweet时

加载推文元数据和回复（如（c）中所述）
创建背景和模式，并用加载的内容填充它们。

这使用标准技术：、和页面元素
更新URL（如（a）中所述）以方便共享
当用户解除模式时

删除模态和背景
更新URL（如（a）中所述）
当用户直接访问特定推文的URL时

让服务器响应tweet作者的个人资料页面，并在其上方的模式中加载tweet详细信息。因此，根本不需要JavaScript。当然，模态可以像前面描述的用例一样被忽略

在您自己的网站上实现此功能
您正确地确定了这种技术既有客户端维度，也有服务器端维度。它的美妙之处在于，当正确实现时，它对用户是完全透明的。他们（不会）注意到的唯一一件事是，整个页面的加载量减少了

在这个答案中散布的参考应该提供良好的