웹 브라우저가 오프라인 모드로 전환되는 순간, HTML의 onoffline 속성이 자동으로 트리거(실행)됩니다. 이 속성을 활용하면 네트워크 연결 상태가 끊어졌을 때 사용자에게 알림을 표시하거나 특정 스크립트를 실행할 수 있습니다.
onoffline 속성이란?
onoffline 속성은 브라우저가 온라인에서 오프라인 상태로 변경될 때 발생하는 이벤트 핸들러입니다. 반대로 오프라인에서 온라인으로 전환될 때는 ononline 속성이 트리거됩니다. 두 속성을 함께 사용하면 네트워크 연결 상태 변화에 즉각적으로 대응하는 웹 페이지를 만들 수 있습니다.
예제 코드
아래 코드를 실행하여 onoffline 속성의 동작을 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<body ononline = "onlineFunc()" onoffline = "offlineFunc()">
<script>
function onlineFunc() {
alert("온라인 상태입니다!");
}
function offlineFunc() {
alert("오프라인 상태입니다!");
}
</script>
<p>웹 브라우저 메뉴 바에서 파일(File) 메뉴를 클릭한 후,
"오프라인으로 작업(Work Offline)" 항목을 선택하여
온라인과 오프라인 상태를 전환해 보세요.</p>
</body>
</html>동작 방식 설명
- ononline = "onlineFunc()": 브라우저가 온라인 상태로 전환되면
onlineFunc()함수가 호출되어 알림 창을 표시합니다. - onoffline = "offlineFunc()": 브라우저가 오프라인 상태로 전환되면
offlineFunc()함수가 호출되어 알림 창을 표시합니다.
테스트 방법
위 코드를 HTML 파일로 저장한 후 브라우저에서 열고, 다음 단계를 따라 해보세요.
- 브라우저 상단의 메뉴 바에서 파일(File) 메뉴를 클릭합니다.
- 오프라인으로 작업(Work Offline) 항목을 선택하면 오프라인 이벤트가 발생하여 알림 창이 나타납니다.
- 다시 해당 항목을 선택 해제하면 온라인 이벤트가 발생합니다.
참고로 Chrome 등 일부 최신 브라우저에서는 메뉴 구조가 달라 개발자 도구의 네트워크(Network) 탭에서 Offline 옵션을 선택하여 동일하게 테스트할 수 있습니다. 또한 JavaScript의 navigator.onLine 속성과 window.addEventListener('offline'/'online') 이벤트 리스너를 활용하면 더 유연하게 연결 상태를 처리할 수도 있습니다.