onoffline 속성

정의

onoffline 이벤트 핸들러는 body 요소, frameset 요소에서 지원되어야 하는 이벤트 핸들러이며, 해당 요소에 offline 이벤트가 발생했을때 호출됩니다.

발생 가능한 요소

이 이벤트 핸들러는 body 요소, frameset 요소에서 내용 속성, IDL 속성으로 동작합니다. 또한 window 객체에서는 IDL 속성으로 동작합니다.

내용 속성이란 다음과 같이 사용하는 것을 말합니다.

<body onoffline="doSomething();">

IDL 속성이란 다음과 같이 사용하는 것을 말합니다.

<script>
var body = document.body;
function doSomething() {
  // offline 이벤트가 발생했을 때 할 일
}
body.onoffline = doSomething;
</script>

메모

offline 이벤트는 모바일 페이지에서 장치의 네트워크 연결이 끊겼을 때 사용자에게 알리거나 폼 입력을 막거나 하는 용도로 사용할 수 있을 것입니다. 예를 들어, 네트워크 연결이 끊겨 있을 때 사용자가 폼에 긴 내용을 입력했다가 좌절하는 것을 막고 싶다고 해 봅시다. 가장 단순한 답은 이렇게 하는 것일 겁니다.

<script>
var input = document.querySelector('#input');

input.onfocus = function () {
  if (/* 장치가 오프라인인지 알아보는 함수를 호출합니다 */) {
    confirm('네트워크에 문제가 있습니다. 잠시 후 재시도해주세요');
  }
}
</script>

이렇게 하면 폼 요소가 포커스를 받을 때마다 함수를 호출해야 하고, 장치는 네트워크 연결 여부를 확인해야 하므로 의미없이 배터리를 낭비하게 됩니다. 다음과 같이 offline 이벤트를 이용하면 낭비를 줄일 수 있습니다.

<script>
var Global = {
  isOffline: false
}
window.onoffline = function () {
  Global.isOffline = true;
}

var input = document.querySelector('#input');
input.onfocus = function () {
  if (Global.isOffline) {
    confirm('네트워크에 문제가 있습니다. 잠시 후 재시도해주세요');
  }
}
</script>

지나치게 단순화했지만 요점은 이해하실 수 있을 겁니다. 장치의 네트워크 연결이 끊기면 자동으로 전역변수 isOffline이 true가 됩니다. 폼 요소에서는 Global.isOffline 변수만 확인하면 되므로 의미없는 배터리 사용을 줄일 수 있고 전체적인 코드 크기가 줄어드는 효과도 있습니다.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

 
html5/event/onoffline.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki