关于H5中History.back()的问题分析

Posted 2020-08-23 Sunny孙宁

1.着手写H5代码有一段时间,昨天遇到了一个"神坑"-关于html中的History对象应用在不同浏览器效果不一致的问题.

2.问题描述:

1)当调用window.history.go(-1)实现页面返回时,在不同浏览器上都会真正的重新加载(重新发送网络请求而不是发送网络请求时读取浏览器的缓存)"目标页面"的网络请求.

2)当调用window.history.go(-2)实现返回两级时,在iphone的safari上会"重新加载"(重新发送网络请求但不是真正的发送网络请求而是读取浏览器的缓存),但是需要在返回到"目标网页真正的刷新目标网页.

3.解决方法: 

1)一开始的思路是记录离开"目标网页" 时的数据,当go(-2)返回到"目标网页"时对数据做相应的加减操作.但是对于复杂的数据类型怎么破.(这种思路用sessionStorage实现的)

2)真正的问题在于再次回到"目标页面"时会读取浏览器缓存,追根溯源,想到了发送网络请求的ajax方法,有没有设置请求不缓存的configuration.结果发现$.ajax(),中有相应的配置选项:cache

   当cache为true时会对这次请求以及请求对应的响应进行缓存.为false时不缓存.这样就解决了返回到"目标页面"时读取缓存的问题.  

4.部分代码展示:

$.ajax({

type: "post",

cache: false,

timeout: 60000,

url: url,

                .......