html 返回上一页强制刷新,微信返回上一页强制刷新问题

问题描述

微信公众号，用户正浏览一个分页加载的列表，翻到第N页点击进入详情页，返回后页面刷新回到了顶部。要求返回用户之前浏览的位置。

问题分析

安卓以及IOS部分机型的微信返回，类似于window.location = xxx强制刷新。

而IOS部分机型微信返回，是window.history.back()返回历史页面，不会刷新页面(js也不会再次执行)。

解决思路

1.分页加载时，用一个变量存入ajax加载的数据。

var listData = null;

// 分页加载时，将取到的数据存储到listData

if (curPage == 1) {

listData = ajaxList;

} else {

listData = listData.concat(ajaxList);

}

2.页面跳转前通过sessionStorage记录ajax加载的数据、页面滚动距离、页码

// 页面跳转前记录列表数据、页面滚动距离、页码，存入sessionStorage

var list = JSON.stringify(listData);

var param = {

page: curPage,

top: document.body.scrollTop

};

param = JSON.stringify(param);

sessionStorage.setItem("aList", list);

sessionStorage.setItem("aParam", param);

3.进入列表页时取sessionStorage存储的aList，如果取到aList，则用sessionStorage里面的数据渲染页面，并滚动到对应的位置，记录当前页码，用于继续翻页；随后，清除sessionStorage里存储的相关数据。

var curPage = 1;

var aList = JSON.parse(sessionStorage.getItem("aList"));

var aParam = JSON.parse(sessionStorage.getItem("aParam"));

// listData用于保存列表数据

// 页面加载时判断sessionStorage是否存有列表数据，有则赋值给listData，否则，listData取同步加载的第一页数据

// 分页加载时，将数据存入listData: listData = listData.concat(aData.aList);

window.listData = aList ? aList : pageConfig.listData;

if (aList != null) {

// 处理原ajax加载的数据，插入HTML

// 滚动到对应位置

document.body.scrollTop = aParam.top;

// 记录当前页码，用于继续翻页

curPage = aParam.page;

// 清除sessionStorage存储的相关数据

sessionStorage.removeItem("aList");

sessionStorage.removeItem("aParam");

}

sessionStorage只支持String类型的存取，对于JSON，需要进行类型转换：

存入时转为字符串 JSON.stringify()

读取时转为JSON JSON.parse()

不足

对于返回不会刷新的微信而言，返回后js不会执行会导致sessionStorage未被清空，刷新该页面时，会先去取sessionStorage里存储的列表数据。