微信浏览器返回上一页停留在原位置

2019独角兽企业重金招聘Python工程师标准>>>

微信浏览器中访问列表页面，点击详细页然后返回上一页，页面相当于重新刷新了，那么就不会停留在列表页面原来的位置了。而且列表页面又是ajax加载更多的效果。

看了一些解决文章，看起来有点复杂。但是还是要用HTML5的新属性来解决。

于是用了sessionStorage，在每次ajax加载的时候，保存已加载的列表HTML和scrollTop的位置，然后在页面每次刷新的时候，再还原原来的HTML和scrollTop的位置。

考虑到页面会有get筛选参数或者再次重新打开的可能，所以还要需要判断返回后的页面url 和上一次的页面url 是否一致，否则每次打开相同的页面都会使用sessionStorage已保存的HTML。如果ajax分页还需要考虑全局的分页参数。

这种解决方法没有改动服务器代码，只改进了前端的加载逻辑。

sessionStorage.setItem("list_ul", $("#list_ul").html());
sessionStorage.setItem("top",document.body.scrollTop);
sessionStorage.setItem("page",obj.page-1);
sessionStorage.setItem("url",window.location.href);

window.onload = function()  
{  
    //返回上一页已浏览html和top位置
    if(window.sessionStorage){  
        var top = parseInt(sessionStorage.getItem("top"));
        top = top?top:0;
        var product_ul = sessionStorage.getItem("list_ul");
        var page = parseInt(sessionStorage.getItem("page"));
        var url = sessionStorage.getItem("url");
        //判断返回后的页面和上一次的页面地址是否一致
        if(product_ul != null && url==window.location.href){
            $('#list_ul').html(list_ul);
            document.body.scrollTop = top + parseInt($(window).height());
            obj.page = page;
        }
    }  
};

以前以为微信浏览器不会缓存页面的图片，但是测试是缓存的。如果不缓存页面图片，那么页面打开就会很慢。

转载于:https://my.oschina.net/qingtianjun/blog/1329843