微信浏览器点击系统返回,安卓返回会重载页面回到页面顶部,iOS则返回则会保留以前浏览位置的解决方法


后续补充: 页面css设置了height: 100%,来避免使用fixed定位弹窗引发的部分机型兼容问题,所以会在返回的时候回到页面顶部,补充解决办法: 在弹窗出现的时候在设置100%高度,并让文档滚动到以前滚动的位置,弹窗关闭的时候取消高度限制,body滚动还原css


在近期作的一个移动端分享到微信的页面时,遇到了这样一个现象:html

在A页面中部点击连接跳转到B页面后,按系统返回操做回到A页面时,
在安卓中刷新重载显示页面的顶部开始,
iOS中则直接返回上次浏览位置,保存了用户操做记录;

针对上述问题,在网上查找了相关解决办法,说的都比较归纳,用了一天的时间才解决掉这个问题(蠢哭(╥╯^╰╥)),下面将个人方法贴出来,但愿能给到像我以前同样走弯路的童鞋一些帮助吧,主要适用于单页面间的跳转。用到了sessionStorage 和 history的replaceState方法。具体代码以下:
html部分:segmentfault

<a data-h5="1" href="https://segmentfault.com/"><span class="img"><img src="./images/vip/img-book2.png" alt="全球好书"></span<b>如何高效学习</b></a>

js部分:浏览器

$('a[data-h5="1"]').on('click', function () {
    // 点击连接记录当前页面滚动位置
    sessionStorage.setItem('scrollTop', $('.body').scrollTop());
});

// 判断当前页面是否返回仍是直接跳转的,读取sessionStorage缓存显示页面
if (sessionStorage.getItem('scrollTop') != null && sessionStorage.getItem('loadType') == 'back') {
    // 避免载入延时处理
    setTimeout(function(){
        // 执行缓存信息
        $('.body').scrollTop(sessionStorage.getItem('scrollTop'));
        // 清除上次缓存
        sessionStorage.removeItem('scrollTop');
    },200);

}
// 设置缓存页面加载来源信息,load:直接跳转,back:浏览器返回
sessionStorage.setItem('loadType', 'load');
// 设置浏览器history,用来监测页面返回
replaceHistory(window.location.href);

// 监测浏览器返回事件,设置返回页面缓存状态
window.addEventListener("popstate", function (e) {
    // 设置sessionStorage中页面返回参数标记
    sessionStorage.setItem('loadType', 'back');
}, false);

function replaceHistory(url) {
    var state = {
        title: "title",
        url: url
    };
    window.history.replaceState(state, "title", url);
}

至此,微信浏览器按返回不能保存以前界面的浏览位置信息的问题就解决了,若是有更好的解决办法,欢迎你们一块儿交流讨论哈~~
一个小问题花费那么多的时间来解决真的很头疼,自身能力真的还差太多。。。修炼中。。。。缓存

相关文章
相关标签/搜索