JavaScript는 어떻게 인터넷 연결 변경을 감지하고 응답할 수 있습니까?

JavaScript에서 인터넷 연결 감지: 종합 가이드

오늘날의 웹 개발 환경에서 강력하고 안정적인 사용자 경험을 보장하는 것은 종종 감지에 달려 있습니다. 인터넷 연결이 오프라인인지 활성 상태인지 여부. 다행스럽게도 JavaScript는 이 중요한 기능을 달성하기 위한 여러 가지 방법을 제공합니다.

window.navigator.onLine 속성 소개

이제 대부분의 주요 브라우저는 window.navigator.onLine 속성을 지원합니다. , 인터넷 연결의 현재 상태를 나타내는 부울 값입니다. 이 속성에 액세스하여 사용자가 인터넷에 연결되어 있는지 확인하세요.

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

연결 이벤트 수신

브라우저에서는 온라인 및 오프라인 이벤트에 대한 이벤트 리스너도 제공합니다. , 연결 상태가 변경될 때 트리거됩니다. 이러한 이벤트를 청취함으로써 실시간으로 변화에 대응할 수 있습니다.

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

클릭으로 연결 상태 확인

이러한 방법을 실제로 시연하려면 , 클릭하면 현재 window.navigator.onLine을 확인하고 표시하는 HTML 버튼을 만듭니다. 값:

<button>

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

추가 고려 사항

• 캐싱 및 웹 소켓으로 인해 window.navigator.onLine 속성이 항상 정확하게 반영되지 않을 수 있습니다. 실제 연결 상태.
• 서버 측 API 사용 (예: fetch() API) 및 정기적으로 응답을 모니터링하면 클라이언트 측 방법을 보완하여 안정성을 높일 수 있습니다.

위 내용은 JavaScript는 어떻게 인터넷 연결 변경을 감지하고 응답할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!