整个链路应该是这样的,用户在消息中心中看到回复自己的信息,点进去后会跳到视频播放页面,页面url中会带上此次消息的replyId(就简称rid吧),然后接下来的问题就是有两个,一个是评论本身是分页的,你的评论不一定在这个视频的第一页,所以要先跳到你评论的页码页面,然后在定位到评论本身。
Chrome,F12可以看到某个视频的播放页整体的网络情况,如下图某个视频播放页的所有发出去的ajax请求(上面筛选XHR即可筛出ajax请求)
可以看到发出去的请求非常多,如果筛出我们需要的东西呢?
很明显,因为http本身是无状态的,它不会知道你上一步做了什么东西,除非你有专门去记录。所以不同页面间去通信,必须依靠一定的媒介,这里就是用的url参数。
上面的链接最后有一个rid,我们把这个rid在network中搜索一下可以发现:
很快,我们就找到了,一个这样的请求:
在这个请求的response中,可以看到,它给出了这个rid对应的评论在第几页:
接下来异步就是前端跳转到第四页,跳转完后接下来呢?
同样的,打开Chrome,F12,Element,可以看到整体的Dom结构,在评论列表里我们可以看到这样的结构
我们大胆猜测,这个data-id就是rid,然后实验了下发现确实是,所以整个流程就简单了。
1.用户点击评论,携带rid跳到视频播放页
2.根据rid获取到当前评论在第N页
3.document.querySelector找到data-id为rid的dom,并且获取它的offsetTop
4.document.documentElement.scrollTop(offsetTop)
这样就完事了, 但是里面有值得注意的点是,请求是异步的,所以从第2步跳到第3步得时候,需要等页面请求加载完成并且渲染完成后再继续。