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

Eric 发布于2019-08-05 14:15 / 1385人阅读

后续补充：页面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);
}

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

超融合服务器专线服务 asp返回之前页面 js返回上一个页面保留数据微信浏览器返回按钮 js调用浏览器的返回数据

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

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

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

后续补充：页面css设置了height： 100%，来避免使用fixed定位弹窗引起的部分机型兼容问题，因此会在返回的时候回到页面顶部，补充解决办法：在弹窗出现的时候在设置100%高度，并让文档滚动到之前滚动的位置，弹窗关闭的时候取消高度限制，body滚动还原在近期做的一个移动端分享到微信的页面时，遇到了这样一个现象：在A页面中部点击链接跳转到B页面后，按系统返回操作回到A页面时，在安...

smallStone 2019-08-22 18:24 评论0 收藏0
iOS 开发：用 Instruments 来检验你的app

摘要：编者注或许很多人对应用不太了解，但可能很多老的开发者都应该用过工具来检测应用内存泄漏情况。运行轨道扩展面板在时间探查仪器的情况下，它是用来跟踪显示堆栈详细地面板。第一个是真正的内存泄漏，一个对象尚未被释放，但是不再被引用的了。编者注：或许很多人对 Instruments 应用不太了解，但可能很多老的 iOS 开发者都应该用过 Instruments 工具来检测iOS应用内存泄漏情况。...

shery 2019-06-25 13:49 评论0 收藏0
微信里面防止下拉"露底"组件

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

hot_pot_Leo 2019-08-21 10:41 评论0 收藏0
History API与浏览器历史堆栈管理

摘要：函数向浏览器的历史堆栈压入一个为设定值的记录，并改变历史堆栈的当前指针至栈顶。需要注意的是，不会改动浏览器历史堆栈的当前指针。因此，这就涉及到了的使用，也牵扯到浏览器的历史记录管理。移动端开发在某些场景中有着特殊需求，如为了提高用户体验和加快响应速度，常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由，这种实现不存在兼容性问题，但是缺点也有--针对不支持onh...

elva 2019-08-02 18:52 评论0 收藏0
iOS/Android 浏览器(h5)及微信中唤起本地APP

摘要：在移动互联网，链接是比较重要的传播媒质，但很多时候我们又希望用户能够回到中，这就要求可以通过浏览器或在微信中被方便地唤起。这时可以使用两个定时器自定义下载页不过在中其实是支持的，就是一个域名形式，在微信中都可以唤起。在移动互联网，链接是比较重要的传播媒质，但很多时候我们又希望用户能够回到APP中，这就要求APP可以通过浏览器或在微信中被方便地唤起。这是一个既直观又很好的用户体验，但...

elisa.yang 2019-06-25 10:36 评论0 收藏0