某些浏览器强制请求的离线缓存化
某些浏览器强制离线缓存化!
1)问题发现:
在android自带浏览器、ios自带浏览器和safari浏览器中发现问题:当给一个script指定了src,如果第一次加载失败,则后续同样请求的script标签均不再发生http请求,此后的请求更像一个读取离线缓存请求。这样,如果服务器端内容更新,则浏览器上无法同步。
但chrome、ie等没有此现象,其它具有src或者href的标签或许也有此问题,等后续验证。
这样导致请求重试功能完全失效。当然解决方法可以是:添加如时间戳、随机数等,使每次请求的url变换,跳过此问题。
2)验证问题地址和说明:
这里附带一个我们内部测试的内容,由于服务器端不稳定,因此常常返回两种结果,所以能说明问题,或者大家做一个服务,返回不同的请求时间更能说明问题:
http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d
说明:此请求可能返回两种结果,变量d一个包含code标签,一个不包含。但是http头均为200:
1-1)var d={title:"suv...."};
1-2)var d={code:-1}
因此控制台打印的结果可能是:code:-1 和 code:undefined
3)测试和结果:
3-1)测试一:连续静态script请求:五个串行的script,所有浏览器均只请求一次http请求。这个可以说的过去。
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> script cache </TITLE> <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script> <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script> <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script> <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script> <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script> </HEAD> <BODY> </BODY> </HTML>
因此结果5条请求均一样,结果可能是以下两种之一:
3-2)测试二:动态加入script
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> script cache </TITLE> <SCRIPT> <!-- function test(){ var s = document.createElement("script"); s.setAttribute("type", "text/javascript"); //s.src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d'+ '&time='+Date.now(); s.src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d'; s.onload = function(){ console.log('code:'+d.code); } document.body.appendChild(s); } //--> </SCRIPT> </HEAD> <BODY> <div onclick='test()' id="div1" style="position:relative;width:200px;height:200px;background-color:green;left:100px;top:100px;"> 控制台根据访问可能打印出以下了两种情况:<br/> 1)code:-1;<br/> 2)code:undefined;<br/><br/> 点击我动态写入script </div> </BODY> </HTML>
点击绿色div后,结果如下:
3-2-1)在android自带浏览器、ios自带浏览器和safari浏览器下如下结果
3-2-2)在ie和chrome等浏览器中,结果随点击的不同而不同:
总结:safari等浏览器,看到相同的url,就不向服务器端发送请求,而是拿本地的离线缓存,此法欠妥。
ps:测试的浏览器版本:ie9,chrome19,safari5.1.4,ios5自带safari,android2.*自带浏览器。