资讯专栏INFORMATION COLUMN

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

smallStone / 2872人阅读

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

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

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

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

全球好书如何高效学习

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);
}



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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95819.html

相关文章

  • 微信里面防止下拉"露底"组件

    摘要:从本人这两个月移动实践的经验来看,微信的里面和的滑动效果无论是在安卓还是下的体验都很一般,有明显的卡顿现象,在安卓下面还会出现滑动过快的时候在页面停下来之后滚动条才闪到相应位置的现象。 前言 在微信里面浏览页面的时候,有一个很管用的方法可以区分这个页面是原生的还是H5形式的。随便打开一个页面,用力往下扯的时候,如果页面上方出现了黑底,黑底上有一行诸如网页由game.weixin.qq....

    hot_pot_Leo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<