【一句话调用】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"就好了。

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

layui父页面调用子页面的渲染_layUI ajax加载html页面后重新渲染的方法
相关问题同: 1.layUI使用jquery.load加载界面时,如何让layui渲染页面? 2.layUI ajax加载html页面后重新渲染 layUI ajax加载html页面后渲染,关键在将h ...
微信小程序iphone7设备下跳转h5页面失败，h5页面显示白屏，加载报错，其他页面正常显示
如题,遇到了上面这个问题,在小程序的webview中加载了一个h5页面,满足某种条件的时候跳转到到这个h5页面,这个页面处理了一些逻辑,处理完成后会跳转回来这个页面,所以在往这个h5页面跳转的时候也携 ...
android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具
Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊给大家提供一个思路,实现web加壳,利用打印浏览器实现简单来说就是把我们的web页面 ...
jap页面使用ajax动态加载列表数据,JSF - 使用AJAX调用基于DataTable中的mimetype值加载不同形式...
对于我的一个项目,我需要根据DataTable组件中可用的mimetype值加载不同的表单.我有标题,内容 - 中间的DataTable和页脚中的数据显示.单击DataTable条目应根据mimety ...
停止页面js加载函数(jquery)╮(‵▽′)╭秒杀业务场景
//停止页面js加载 function CloseSearch() { $(".CloseSearch").html(CloseSearch); var xmlh ...
一个页面从输入URL到加载显示完成，发生了什么？
面试经典题--URL加载一.涉及基本知识点: 1. 计算机网络五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...
Android批量图片加载经典系列——使用LruCache、AsyncTask缓存并异步加载图片
一.问题描述使用LruCache.AsyncTask实现批量图片的加载并达到下列技术要求 1.从缓存中读取图片,若不在缓存中,则开启异步线程(AsyncTask)加载图片,并放入缓存中 2.及时移除 ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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