- navigator.onLine : true(온라인), false(오프라인) 값을 보관하는 속성
사용자가 해당 메뉴항목을 '오프라인 모드'로 전환할때마다 갱신된다
"online" "offline" 이벤트
이 두가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 마다 각 페이지의 <body>에서 발생함.
document.body -> document로 전달되고 window에서 종료됨.
두가지 모두 취소가 불가능한 이벤트임.
아래와 같이 몇 가지 방법으로 해당 이벤트에 대한 리스너를 등록 할 수있다.
- window, document, document.body에서 addEventListner를 사용.
- JS의 Function에서 document나 document.body에 .ononline, .onoffline 속성을 사용.
- <body>태그에 ononline="..." onoffline="..." 속성을 지정.
<!doctype html>
<html>
<head>
<script>
function updateOnlineStatus(msg) {
var status = document.getElementById("status");
var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
status.setAttribute("class", condition);
var state = document.getElementById("state");
state.innerHTML = condition;
var log = document.getElementById("log");
log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
}
function loaded() {
updateOnlineStatus("load");
document.body.addEventListener("offline", function () {
updateOnlineStatus("offline")
}, false);
document.body.addEventListener("online", function () {
updateOnlineStatus("online")
}, false);
}
</script>
<style>...</style>
</head>
<body onload="loaded()">
<div id="status"><p id="state"></p></div>
<div id="log"></div>
</body>
</html>
'웹표준 > Offline & storage' 카테고리의 다른 글
| 4. File API (0) | 2020.04.15 |
|---|---|
| 3. WHATWG 클라이언트 측 세션 및 영구 저장소 (0) | 2020.04.15 |
| 1. 애플리케이션 캐시 (0) | 2020.04.15 |