Javascript 使用无限滚动和历史API

Javascript 使用无限滚动和历史API,javascript,ajax,infinite-scroll,Javascript,Ajax,Infinite Scroll,我正在我的网站上使用。我在每个使用无限源的帖子上都有一个评论源。当有人点击其中一条评论时,应该加载该评论的回复。当有人点击某条评论的回复时,该回复将显示出来。默认情况下,对评论的回复没有回复。每个视图都会显示帖子和父评论。因此,我将有3个视图: Fist view Post | Comments Second View Post | Comment | Replies Third View Post |

我正在我的网站上使用。我在每个使用无限源的帖子上都有一个评论源。当有人点击其中一条评论时,应该加载该评论的回复。当有人点击某条评论的回复时,该回复将显示出来。默认情况下,对评论的回复没有回复。每个视图都会显示帖子和父评论。因此,我将有3个视图:

Fist view
    Post
    |
    Comments

Second View
    Post
    |
    Comment
    |
    Replies

Third View

    Post
    |
    comment
    |
    reply
这是非常简单的创建正常,但是,我想创建所有这些使用历史API。例如,如果用户登录到第一个视图,然后单击一条注释,第二个视图应该使用PushState加载,新的回复提要应该使用Ajax加载。这就是我感到困惑的地方。如果用户单击后退按钮,提要如何保持其位置。因此,例如,如果他们在回复中,并且他们回击,那么他们将显示在评论提要中的相同位置。有没有更简单的方法

这与Twitter的评论系统非常相似。

状态对象-状态对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联。每当用户导航到新状态时,都会触发popstate事件,并且该事件的state属性包含历史记录条目的state对象的副本

您可以在您的状态中包括页面上的滚动位置,或单击的注释的唯一标识符。然后,在弹出状态时,对元素使用,
scrollIntoView

编辑:

要在打开注释之前将当前位置包括在当前状态中,请在推送新状态之前,使用
replaceState
将当前位置添加到状态中。

是的,但是state对象是我要进入的评论。如果我回去,那么state对象在技术上是未知的。所以如果我回去,我仍然会失去我在feed中的位置。啊,真的。在这种情况下,您可以在推送新状态之前使用
replaceState
。我已经编辑了我的答案,这是个好主意。您是否认为与其这样做,不如复制注释容器,清空它,然后隐藏原始注释容器?因此,新容器将保存已单击评论的回复,而旧容器仍将保存所有评论,但将被隐藏。然后,当用户单击“返回”时,用户所在的位置将是state对象?我认为复制comments容器可能有点过头了。我认为使用与在另一个视图中渲染注释相同的渲染代码创建特定父注释的副本就足够了。