这个问题应该是 ajax + tab 的通病,最近的电商项目,订单部分用的 ajax +tab,由于ajax + tab切换没有产生history,所以造成无法返回。
此贴,也是楼主研究别的博主的技术贴,自己消化过后才放出的帖子,只适用于日常开发,解决日常开发问题。
由于楼主工作中没有前端partner,所遇到的问题只能自己琢磨也没有人交流。所以不足之处还请多谅解!
订单各种状态的数据都是靠ajax不同的参数来获取的所以没有历史记录。
解决方案 : 每次点击不同状态强行增加history,返回的时候,通过URL或其他传参,就可以还原到Ajax之前的模样。
操作要点: history.pushState 、 history.replaceState 、 window.onpopstate。
顺便介绍一下 pushState、replaceState 从命名上来看 一个是增加状态、一个是替换状态
history.pushState(data, title, url)
会往历史记录对战顶部添加一条历史记录;data会在onpopupstate事件触发事作为参数传递过去;title作为参数传递过去,但目前浏览器都会忽略,此参数忽略,url为页面地址,缺省是为当前地址;
history.replaceState(data, tltle, url);
更改当前历史记录,参数同上;
window.addEventListener("popstate", function() {
var state = history.state;
/*
来 撸代码
*/
});
history.state 用于存储上两个放大的data;(有人讲浏览器的读写不一样,没有时间深入研究、但谷歌是正常的)
popstate事件:用于监听浏览器的前进与后退,可以和history.state配合使用,history.state做为每次前进或后退的参数,便于我们做出不同的处理;也可以通过每次增加堆栈、修改堆栈的改变的url加入不同的参数来判断
ex :history.pushState({}, "", "myorder.html?" + str);
每次切换不同状态时:增加history
str 作为判断的参数 这个处理是在同页面上添加不同的参数,这段没有用到history.state
在监听到浏览器有前进或后退时 获取状态 再次发出请求 获取改状态时的数据就ok
这里是使用history.state 为便于理解 我把orderStatus 复制给id 实际操作中创建一变量即可;
在popstate 触发时我们便可以根据history.state 来获得状态 再次获取数据就ok
这两种操作 就是一个利用history.state来存储状态,一个是修改url获取状态,个人推荐还是通过history.state来存储状态比较好 ,通过改变 url 刷新页面时会有问题,问题没有深入的剖析,中午了 困了 ,有时间在研究。
一个人做公司大小项目,心力不足,大到所有的项目都是独立开发,小到页面修改样式,修改ui,毕竟时间有限,精力有限。开发中遇到过很多有趣的问题,以后多更新一些开发中遇到的问题。
附:最近又开始做小程序了,可能更新的会非常慢,但还是会开发中遇到的问题、解决问题的方式以及新的知识点给更出来。