在做html5开发时，经常会碰到从列表页跳转到详情页，然后在点击返回或者手机手势返回后，列表内容刷新且无法定位到点击的位置，尤其包含列表加列表的情况 问题尤其明显。
解决办法如下：
1、vue的组件切换，然后使用keepAlive来控制组件的刷新和缓存
缺点：项目需使用vuejs
2、使用local storage或者cookie记录 当前列表处定位高度，以及加载的页数等，通过浏览器判断，如果是返回过来的，写另外的ajax加载出来，渲染出来，然后在执行#方式定位
缺点：加大交互代码的开发量，同时用户体验感不是很好，如果存在列表+列表的情况逻辑上的先后更加负载
3、使用iframe嵌套，客户感觉是跳转页面，其实是弹框覆盖，然后监听返回，关闭iframe。
我本人使用的是第三种方式，其稳定和兼容性比较强，只要封装成function，使用的时候传入url调用即可。
调用js：h5Open('/wap/hxxxpage?id=333');
封装方法：
function h5Open(_url){ if (!_url) { return; }if ($("#aoq_h5o").length <= 0){$("body").append('<div id="aoq_h5o" style="position: fixed; z-index: 999;display: flex; justify-content: center; align-items: center; background: white; width: 100%; height: 100%; top:0px; left:0px;"><iframe frameborder=0 width=100% height=100% src="#"></iframe></div>')}$("#aoq_h5o iframe").attr("src", _url); $("body").css("overflow", "hidden");var state = { title: "title", url: "#" };window.history.pushState(state, "title", "#");// 监听返回键window.addEventListener("popstate", function (e){$("#aoq_h5o").remove();$("body").css("overflow", "");});}
tip:iframe的viewport和调用页面是一致的，需要缩放适配等自己在iframe 标签里面加
如果页面html静态展示非异步拉取的列表数据，直接在跳转的a标签里面使用target="_blank"就好了。
【一句话调用】h5页面 返回缓存 如js加载列表页点击进入详情页 返回后刷新的问题和无法定位问题 html 返回定位
