【一句话调用】h5页面 返回缓存 如js加载列表页点击进入详情页，返回后刷新的问题和无法定位问题 html 返回定位

在做html5开发时，经常会碰到从列表页跳转到详情页，然后在点击返回或者手机手势返回后，列表内容刷新且无法定位到点击的位置，尤其包含列表加列表的情况 问题尤其明显。

解决办法如下：

1、vue的组件切换，然后使用keepAlive来控制组件的刷新和缓存

缺点：项目需使用vuejs

2、使用local storage或者cookie记录 当前列表处定位高度，以及加载的页数等，通过浏览器判断，如果是返回过来的，写另外的ajax加载出来，渲染出来，然后在执行#方式定位

缺点：加大交互代码的开发量，同时用户体验感不是很好，如果存在列表+列表的情况逻辑上的先后更加负载

3、使用iframe嵌套，客户感觉是跳转页面，其实是弹框覆盖，然后监听返回，关闭iframe。

我本人使用的是第三种方式，其稳定和兼容性比较强，只要封装成function，使用的时候传入url调用即可。

调用js：h5Open('http://xxxx.com/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"就好了。