웹 브라우저가 온라인 상태로 전환되어 작업을 시작하는 순간 ononline 이벤트 속성이 트리거됩니다. 반대로 네트워크 연결이 끊겨 오프라인 상태가 되면 onoffline 속성이 실행됩니다. 아래 예제 코드를 통해 두 속성의 실제 동작 방식을 확인해 보세요.
ononline 속성이란?
ononline은 <body> 태그에 지정할 수 있는 이벤트 속성으로, 브라우저가 다시 온라인 모드로 동작하기 시작할 때 미리 정의된 자바스크립트 함수를 자동으로 호출합니다. 이를 활용하면 사용자에게 네트워크 연결 상태의 변화를 알려주거나, 오프라인 동안 임시 저장했던 데이터를 서버와 자동으로 동기화하는 등의 기능을 구현할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<body ononline = "onlineFunc()" onoffline = "offlineFunc()">
<script>
function onlineFunc() {
alert("Working online!");
}
function offlineFunc() {
alert("Working offline!");
}
</script>
<p>브라우저 메뉴 표시줄에서 파일(File) 메뉴를 클릭하고 "오프라인으로 작업(Work Offline)"을 선택한 뒤, 온라인과 오프라인 상태를 번갈아 전환해 보세요.</p>
</body>
</html>
실행 결과
위 코드를 실행한 후 브라우저 메뉴에서 파일(File) → 오프라인으로 작업(Work Offline)을 선택하면 오프라인 알림 창이 나타납니다. 다시 체크를 해제하여 온라인 상태로 돌아오면 ononline 이벤트가 발생하며 "Working online!" 알림이 화면에 표시됩니다.
참고로 최신 웹 표준 환경에서는 HTML 속성 대신 자바스크립트의 window.addEventListener('online', ...) 및 window.addEventListener('offline', ...) 방식으로 동일한 기능을 구현하는 것이 권장됩니다.