页面返回上一页浏览位置

2024年3月18日 112次阅读 来源: 苑庆涛

1.如果上一页是静态页面，可以用 history.go(-1)方法；

　　go() 方法可加载历史列表中的某个具体的页面。

　　该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

　　该方法返回上一页，不刷新页面，但是会执行js；

例子：

<a href=”javascript:;” onclick=”javascript:history.go(-1);”>Back</a>

点击back 页面就会返回上一个页面的浏览位置
2.我在工作中遇到的，页面采用了vue，页面每次加载都会去请求数据，用history.go(-1)方法返回上一页，上一页的页面因为重新请求数据，页面不会定位到上次浏览的位置；

解决思路：使用onbeforeunload（事件在即将离开当前页面（刷新或关闭）时触发）方法在页面离开时把滚动条位置和页面文本高度放到cookie中，当页面刷新或重新加载时取出滚动条位置和页面文本高度，设置到页面。

代码如下：

window.onbeforeunload = function () {
    var scrollPos, height;
    if (typeof window.pageYOffset != 'undefined') {
        scrollPos = window.pageYOffset;
    } else if (typeof document.compatMode != 'undefined' &&
        document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    } else if (typeof document.body != 'undefined') {
        scrollPos = document.body.scrollTop;

    }
    height = document.body.scrollHeight;
    document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
    document.cookie = "height=" + height; //存储滚动条位置到cookies中
}
new Vue({
　　el:'#app',
　　
　　updated: function () {
    　　var height;
    　　//获取之前的页面高度
    　　if (document.cookie.match(/height=([^;]+)(;|$)/) != null) {
        　　var arr = document.cookie.match(/height=([^;]+)(;|$)/); //cookies中不为空，则读取页面高度
        　　height = parseInt(arr[1]);
    　　}
    　　//获取之前的滚动条位置
    　　if (document.body.scrollHeight == height) {
       　　 if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
            　　var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
            　　document.documentElement.scrollTop = parseInt(arr[1]);
            　　document.body.scrollTop = parseInt(arr[1]);
        　　}
    　　}
　　}

})


    原文作者：苑庆涛
    原文地址: https://www.cnblogs.com/yuanqt/p/11125913.html
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞