HTML onoffline 이벤트 속성은 브라우저가 오프라인 상태로 전환될 때, 즉 네트워크 연결이 끊기는 순간 지정된 자바스크립트 코드를 실행하도록 하는 이벤트 속성입니다. 반대로 네트워크가 다시 연결되면 ononline 이벤트가 발생하며, 두 속성을 함께 사용하면 사용자의 인터넷 연결 상태 변화를 실시간으로 감지할 수 있습니다.
문법(Syntax)
onoffline 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onoffline="script"></tagname>
예제(Example)
아래 예제는 ononline과 onoffline 이벤트 속성을 함께 활용하여, 네트워크 연결 상태가 변경될 때마다 알림 창(alert)을 표시하는 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.show {
font-size: 1.2rem;
color: #fff;
}
</style>
<body ononline="onlineFn()" onoffline="offlineFn()">
<h1>HTML onoffline/ononline Event Attribute Demo</h1>
<p style="color:#db133a;">Try to disable/enable your network.</p>
<div class="show"></div>
<script>
function onlineFn() {
alert("Hey! You are online");
}
function offlineFn() {
alert("Hey! You are offline");
}
</script>
</body>
</html>
실행 결과(Output)
코드를 실행한 후 네트워크를 비활성화하거나 다시 활성화해 보세요. 연결 상태가 바뀔 때마다 아래 이미지와 같이 알림 창이 나타나며 onoffline/ononline 이벤트 속성의 동작을 직접 확인할 수 있습니다.
활용 팁
onoffline 이벤트는 주로 <body> 태그에 적용되며, 오프라인 상태에서 캐시된 데이터 안내 메시지 표시, 폼 데이터 임시 저장, 오프라인 우선 웹 애플리케이션(PWA) 구현 등 다양한 상황에서 유용하게 활용됩니다. 자바스크립트의 navigator.onLine 속성과 함께 사용하면 현재 연결 상태를 더욱 정확하게 판별할 수 있습니다.