87,910
社区成员
发帖
与我相关
我的任务
分享HTML5离线缓存：swapCache()报错问题，请教。
采用书上例子，本地测试发现swapCache()方法一直报错，上传到服务器update()和swapCache()方法同时报错，不明白是何原因，在此请教各位大牛，谢谢。
JavaScript:
MANIFEST:
JavaScript:
<!doctype html>
<html lang="en" manifest="main.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<title>HTML5 Cache</title>
<style>
*{ margin:0; padding:0; border:0; list-style:none; }
body{ padding:10px; background:#ffe; }
p{ line-height:2; }
a{ display:block; line-height:2; color:#f30; }
table{ border-collapse:collapse; border:1px solid #ddd; background:#fff; width:100%; }
th,td{ padding:6px; border:1px solid #ddd; text-align:left; }
th{ color:#00c; background:#eee; }
#data{ display:block; max-width:100%; padding:10px; border:1px solid #ccc; background:#fff; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
button{ border:1px solid #030; background:#060; color:#fff; padding:8px 4px; }
button[id='update'],button[id='swap']{ border-color:#900; background:#f30; }
#buttons{ padding:10px 0; }
</style>
</head>
<body>
<img id="data" src="1.jpg" alt="">
<p>The status is: <strong id="status"></strong></p>
<div id="buttons">
<button id="link1" data-src="1.jpg">link-1</button>
<button id="link2" data-src="2.jpg">link-2</button>
<button id="link3" data-src="3.jpg">link-3</button>
<button id="update">Update</button>
<button id="swap">Swap</button>
</div>
<table id="etable"><tr><th>Event Type</th></tr></table>
</body>
<script>
var buttons=document.querySelector('#buttons');
buttons.onclick=handleButtonPress;
applicationCache.onchecking=handleEvent;
applicationCache.onnoupdate=handleEvent;
applicationCache.ondownloading=handleEvent;
applicationCache.onupdateready=handleEvent;
applicationCache.oncached=handleEvent;
applicationCache.onobselete=handleEvent;
function handleEvent(e){
if(applicationCache.status==applicationCache.UPDATEREADY){
console.log('update start');
applicationCache.swapCache();
console.log('update end');
location.reload();
}
document.querySelector('#etable').innerHTML+='<tr><td>'+ e.type+'</td></tr>';
checkStatus();
}
function checkStatus(){
var statusNames=['UNCACHED','IDLE','CHECKING','DOWNLOADING','UPDATEREADY','OBSOLETE'];
var status=applicationCache.status;
document.querySelector('#status').innerHTML=statusNames[status];
}
function handleButtonPress(e){
if(e.target.tagName=='BUTTON'){
switch(e.target.id){
case 'swap':
applicationCache.swapCache();
break;
case 'update':
applicationCache.update();
break;
default:
document.querySelector('#data').src= e.target.getAttribute('data-src');
}
}
}
</script>
</html>
MANIFEST:
CACHE MANIFEST
#v-2329
CACHE:
index.html
1.jpg
2.jpg
3.jpg
FALLBACK:
offline3.html
...全文
请发表友善的回复…
发表回复
phoenix-sky 社区高级成员 T9 2014-05-16
- 打赏
- 举报
谢谢
phoenix-sky 社区高级成员 T9 2014-05-14
- 打赏
- 举报
在网上搜索一直没找到解决方案，再顶顶。
打字员 2014-05-14
- 打赏
- 举报
http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html
沒有試過，自己看看有沒有幫助
好像說要在服務器設置 MANIFEST 的MIME類型,不知道你沒有設置過
phoenix-sky 社区高级成员 T9 2014-05-13
- 打赏
- 举报
谁做过这样的功能或遇到过类似的问题吗？
