[JavaScript] 자바스크립트에서 온라인/오프라인 대응하기

106_자바스크립트에서 온라인/오프라인 대응하기

[적용]

• 오프라인 화면에 네트워크의 연결 상태를 표시하고 싶을 때

---

[문법]

속성	의미	타입
navigator.onLine	네트워크 상태 가져오기	진리값

---

[내용]

navigator.onLine 속성을 사용하여 네트워크 상태를 확인할 수 있다.

반환값이 true인 경우 네트워크 온라인 상태를 나타내며, 해당 속성은 읽기만 가능하다.

브라우저의 네트워크 상황을 감시하여 오프라인 상태일 때 화면에 해당 상태를 표시하는 기능 등에 사용할 수 있다.

 

// 접속 상태 확인
const inOnline = navigator.onLine;
if (isOnline === true) {
	console.log('온라인 상태입니다.');
} else {
	console.log('오프라인 상태입니다.');
}

 

window 객체어서 online과 offline 이벤트를 감시하면 네트워크의 상태 확인이 가능하다.

// 온라인 상태가 되면 실행되는 이벤트
window.addEventListener('online', () => {
	console.log('온라인 상태입니다.');
});

// 오프라인 상태가 되면 실행되는 이벤트
window.addEventListener('offline', () => {
	console.log('오프라인 상태입니다.');
});

 

 

---

 

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김