关于浏览器返回上个界面时回到上到浏览的位置

Posted 2023-05-09

参考技术A 总结一下能够记住的问题。第一个是返回上个界面记住上次浏览的位置，第二个是滚动加载更多的分页吧。

嘛，遇见问题第一件事干嘛。百度啊，看思路啊。思想比较明确，尤其是vue，貌似生来就与vuex判定在一起了嘛。大概思路就是离开页面时保存位置，回到界面时利用滚动到那个位置就行了。网上的回答是这样的。

       迫不及待试了一下。嗯，可是beforeRouteLeave函数不调用啊喂，这怎么办，又是一顿百度，无果，无奈改用beforeDestory函数，猜测原因可能是我写这个函数的组件是路由组件的子组件，待验证。

      再试一下，感觉还是很奇怪啊，就是位置大概在超过一个屏幕高度后就不准了有木有，一顿console.log调试。（目前只会这样调试。见笑了）发现离开时记录的位置根本不准确，嗯，记录方式大概就是vuex中设置一个position的state，离开的时候把window.scrollY保存进去。一顿各种测试，再次改变做法，不在组件钩子中记录，改在路由事件中记录历史位置，解决位置坐标记录不准的问题。（原因再次猜测：我写那个beforeDestory函数所在的组件里面有一个循环生成很多子组件，然后再调用beforeDestory时前面的子组件已经销毁，所以获取到的window.scrollY值不对且很小，技术不够，暂时找不到验证方法）

    位置有了，剩下的就是返回时window.scrollTo到指定位置，发现依然存在问题，就是位置不准且滚动位置很奇怪。这个问题很好猜测，大概就是界面还没渲染出来就调用了window.scrollTo方法这样的，因为我在created钩子中写过获取获取的动作，所以滚动动作就加在数据成功后，遂解决。

嘛，其实做的时候遇见过还有一些问题，比如刚开始我的做法的vue-router中指定为history模式，并设置scrollBehavior函数，大概是这样

但是位置返回不准确，应该是我在created中获取数据后有刷新dom操作导致的。

浏览器按返回键回到指定页面

在做一个网页的项目，有个功能的需求是“不要让返回键能回到上一页，而是直接回到主页”。

实现原理： 
利用HTML5 的window.history对象实现对历史记录的访问

实现代码：

一,在需求页面之前的页面修改历史记录

 

<!--前提1
//假设我们在index.html页面
//------进入到order.html进行表单提交
//自动执行下面下列代码
 
//index页面是我们要跳转的页面-->
function pushHistory() {
   window.history.pushState({}, "index", "index.html");
}
 
pushHistory();
 
 
<!--影响2
当前url本应该是order.html,但是因为上述代码改变为index.html-->
 
<!--过程3
我来到了一个表单显示的页面
orderRead.html
此时回退会回到前一页面，但是前一页面的URL被修改为index.html
所以，我们跳转到了index.html
也就是我们需要跳转的页面
-->
 
 
 
<!--思路
1.实现我们大概可以知道pushState函数的作用是修改当前页面的地址，但是不刷新当前页面或者跳转到其他页面
2.因为当前页面的地址被改变了，我们今天到后面的页面时，当前页面的地址所以我们通过返回键的时候，返回的事index页面
-->

 

 

二,在需求页的页面修改历史记录

这个方法与之前的方法不同的地方是就在当前页面写代码

 

//该方法修改地址后，会变成order#
//此时返回是变成order.html
//但是，执行了一次popstate
//我们通过捕捉这个popstate完成手动跳转
 function pushHistory() {
       window.history.pushState({}, "index", "#");
                        }
 
 
 
//执行代码
pushHistory();
//添加监听事件，监听后退，前进
window.addEventListener("popstate", function (e) {
      window.location.href = "index.html";
}, false);

三.pushState介绍

　　HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。

　　这些方法可以协同window.onpopstate事件一起工作。

方法：修改网站路径并创建新的历史记录

 history.pushState(state, "title", "url");

参数	作用
状态对象（state object）	一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。任何可序列化的对象都可以被当做状态对象。
标题（title）	FireFox浏览器目前会忽略该参数，但是我们不能保证以后是否会被用到。
地址（URL）	新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，可以理解为当前地址被更改，不指定的话则为文档当前URL

1.参数URL必须和当前URL同源 
2.修改网站路径但不操作

四.popstate事件

　　调用history.back()、history.forward()、history.go()等方法，会触发popstate事件，单纯调用pushState()或replaceState()不触发popstate事件。 
　　 
　　访问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。

• history.back()和history.forward()　：　分别表示向后一页和向前一页。
• history.go(num)　：　表示向前或向后翻多少页，num为正数表示向前翻，为负数则向后翻。
• History.back()　：　等价于history.go(-1)，history.forward()等价于history.go(1)。

五.总结

对于这些也是在项目需求的时候上网找的资料，本身没有很深入的研究，只是将其实现，在代码上可能存在一定的缺陷。

 

 

来源于：https://blog.csdn.net/u010433704/article/details/82661289

参考： 
https://www.jb51.net/article/82673.htm#