webview中侧滑返回上一页引发的思考，history学习

昨天被测试人员提出了一个bug。套壳的h5项目，程序中的返回是正常的能正确返回页面。但是当测试人员使用了手机的侧滑功能后就发现返回的页面有问题了。当时第一感觉就是侧滑都不是我程序能控制的管我鸟事。但是奈何这个项目前端只有我一个人负责，不搞也要搞。然后测试人员又提供了一个号消息，另一个项目侧滑没有问题，是正常的。于是开始找寻两个项目中返回逻辑的差别。最后发现差别是有问题的A项目，返回的时候有些进行了特定的跳转。而没问题的B项目返回全部都是windows.history.back()。然后就开始查询资料看看问题点在哪儿。因为项目使用的umi，于是去github查看umi使用的什么库管理history。最后查找到这篇文章https://www.cnblogs.com/accordion/p/5699372.html。

经查阅一些其他资料稍微整理一下history的一些基础知识：history的方法包括：back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)，属性:length、state, 事件：window.onpopstate。history的一些方法说明：

（1）back()：回退到上一个访问记录; 在历史记录中后退：window.history.back();

（2）forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward();

（3）go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1); 向前移动一页window.history.go(1);

（4）查看历史记录栈中一共有多少个记录点：

（5）pushState(stateData, title, url)：在history中创建一个新的访问记录，不能跨域，且不造成页面刷新;window.history.length;

（6）replaceState(stateData, title, url)：修改当前的访问记录，不能跨域，且不造成页面刷新;

（7）window.onpopstate：当调用history.go()、history.back()、history.forward()时触发;pushState()\replaceState()方法不触发。

（8）window.onhashchange：当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发。触发的情况如下：a、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分;b、使用不同history操作方法到带hash的页面;c、点击链接跳转到锚点。

基础的一些知识了解之后开始查找问题点在哪儿。umi中的history.push()使用的就是pushState方法。一开始想查找history栈中存储的值。但是找了好多文章没有找到对应的查找方法，唯一一篇相关的就是上面提到的那个文章。讲解了堆栈的执行顺序。

当在文章中看到这边的时候，顿时就感觉找到问题点了。然后开启项目测试了一下。通过打印history.length属性来查看当时history堆栈中具体的存储数量。才发现果然是这个问题。pushState方法创建一个新的url记录，其也是清空、再新增记录;，最终的解决方法是项目中全部都使用特定跳转，不在使windows.history.back()。这样就避免堆栈中出现无效的数据。虽然这样增加了项目中返回逻辑的代码量。有些页面是带参数跳转的，如果使用windows.history.back()就不用理会上一个页面传过来的参数了。但是后面需要使用history.push() 指定跳转的话，需要获取上一页的参数拼接后再跳转。

加油 奥利给！！！

标签：侧滑,back,window,跳转,go,webview,页面,history
来源： https://www.cnblogs.com/danhua/p/15424875.html