位置:首頁 > 軟件操作教程 > 編程開發(fā) > HTML > 問題詳情

HTML5 支持離線行為

提問人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-17

    假設(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>


繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部