当前位置:   article > 正文

浏览器的记录栈和history API的应用_如何获取历史栈链接

如何获取历史栈链接

回顾

上篇博客,我使用hashchange函数来监听每次hash改变的时候,记录当前的scrollTop值到sessionStorage中,然后再进入该页面时就看sessionStorage中是否有记录值,如果有就在页面html内容全部加载完成后取出记录值使页面加载到同样的位置,如果没有记录就记录当前的位置。一波简单的操作之后,页面在hash变化的时候,确实能按照我们预期的那样进行着,非第一次进入一个页面,会保存上次浏览该页面的位置继续浏览,但是!当我在切换多个hash后,按物理键返回或点击页面的返回键的时候,页面并没有按照我当前记录的那样保存位置,而是发生了错乱。

问题调研

在一系列的断点调试的时候,终于找到了问题所在。假如有两个页面a(#a) 和b(#b),先从a页面跳到b页面,然后在b页面返回到a页面的时候,注意了!浏览器的行为这时候有点诡异,返回的时候,首先a的scrollTop值赋给当前页面!首先a的scrollTop值赋给当前页面!首先a的scrollTop值赋给当前页面!然后再改变hash,然后再渲染dom加载内容,那么一切都变得合理了
由于首先会把a的滚轮值给b页面,那其实这时候b的scrollTop值其实已经是a的了,然后再hash改变的时候,执行我们的hash监听函数,把b的scrollTop值(其实是a的位置记录)错误的更新了,当我们一直点返回,就会一直记录错的位置,只要返回到已经错误记录过的那个页面时,就会出现我们前面说的那种错误现象了。
那么找到问题所在了,原来这是单页面的特性使然,并不是代码问题,那解决也就变的简单了,只要让页面返回或者前进的时候,不执行我们定义的hashchange函数,也就是只要是页面返回或者前进的时候,就不记录当前的scrollTop值,让他只执行他的页面变化,,就OK了。
避免再次踩坑,我还是不急着解决该问题,而是决定彻底把浏览器的记录行为弄清楚先!!!

理解浏览器的历史记录

1.浏览器有一个类似栈的网页记录的数据结构,我把他叫做记录栈,在同一个窗口下,改变网页的时候,会把当前的网页记录推到记录栈中,刷新页面不会增加记录栈。浏览器有一个history对象,可以记录这种行为,但是只能通过length属性查看当前窗口消息历史记录的总数,不能查看当前栈里的情况,对于开发者来说,操作记录栈相当于操作一个黑箱子,所以

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/536770
推荐阅读
相关标签
  

闽ICP备14008679号