HTML5 支持離線行為
假設(shè)要構(gòu)建一個(gè)包含css、js、HTML的單頁應(yīng)用,同時(shí)要為這個(gè)單頁應(yīng)用添加離線支持。要將描述文件與頁面關(guān)聯(lián)起來,需要使用HTML標(biāo)簽的manifest特性指定描述文件的路徑,代碼如下:
<html manifest='./offline.appcche'>
開發(fā)離線應(yīng)用的第一步就是檢測設(shè)備是否離線。 _
HTML5新增了navigator.onLine屬性。當(dāng)它為true的時(shí)候,表示聯(lián)網(wǎng);值為false的時(shí)候,表示離線,代碼如下:
if (navigator.onLine) {
//聯(lián)網(wǎng)
}else{
//離線
}
1.online事件(IE9+瀏覽器支持)
當(dāng)網(wǎng)絡(luò)從離線變?yōu)樵诰€的時(shí)候,觸發(fā)該事件,在Window上觸發(fā)該事件,不需要刷新,代碼如下:
window.online = function(){
//需要觸發(fā)的事件
}
2.offline事件(IE+瀏覽器支持)
當(dāng)網(wǎng)絡(luò)從在線變?yōu)殡x線的時(shí)候,觸發(fā)該事件。和online事件一樣,在Window上觸發(fā)該事件,不需要刷新,代碼如下:
window.offline = function(){
//需要觸發(fā)的事件
}
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function loadState(){
if(navigator.online){
console.log("在線");
}else{
console.log("離線");
}
//添加事件監(jiān)聽器,實(shí)時(shí)監(jiān)聽
window.addEventListener("在線"function(){
console.log("在線");
},true);
window.addEventListener("離線"function(){
console.log("離線");
},true);
}
</script>
</head>
<body>
</body>
</html>
點(diǎn)擊加載更多評論>>