투케이2K

397. (javaScript) 자바스크립트 navigator.onLine 사용해 현재 연결 된 네트워크 온라인 및 오프라인 상태 확인 본문

JavaScript

397. (javaScript) 자바스크립트 navigator.onLine 사용해 현재 연결 된 네트워크 온라인 및 오프라인 상태 확인

투케이2K 2025. 6. 17. 19:05
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트) / navigator / onLine / 네트워크

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script>

        // --------------------------------------------------------------------------------------------------------------

        // [전역 변수 선언]
        var isOnLine = false; // [현재 연결 된 네트워크 상태 확인]

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log("");


            // -----------------------------------------
            // [navigator.onLine 사용해 현재 네트워크 상태 확인]
            // -----------------------------------------
            // 참고 : navigator.onLine 는 단순히 브라우저가 네트워크에 연결되어 있는지를 알려주며, 실제 인터넷 접속 가능 여부(예: DNS, 서버 응답 등)를 보장하지는 않습니다.
            // -----------------------------------------
            if (navigator.onLine) {
              console.log("");
              console.log("=========================================");
              console.log("[navigator.onLine] : [온라인 상태입니다]");
              console.log("=========================================");
              console.log("");

              isOnLine = true;
            }
            else {
              console.log("");
              console.log("=========================================");
              console.log("[navigator.onLine] : [오프라인 상태입니다]");
              console.log("=========================================");
              console.log("");

              isOnLine = false;
            }



            // -----------------------------------------
            // [window.addEventListener 이벤트 등록 네트워크 변경 상태 감지]
            // -----------------------------------------
            window.addEventListener('online', () => {
              console.log("");
              console.log("=========================================");
              console.log("[Event.onLine] : [네트워크가 온라인으로 변경 되었습니다]");
              console.log("=========================================");
              console.log("");            
            });


            window.addEventListener('offline', () => {
              console.log("");
              console.log("=========================================");
              console.log("[Event.offline] : [네트워크가 오프라인으로 변경 되었습니다]");
              console.log("=========================================");
              console.log("");            
            });

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[Web Document 문서]

https://developer.mozilla.org/ko/docs/Web/API/Navigator/onLine

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

399. (javaScript) 자바스크립트 AWS S3 listObjectsV2 버킷에 생성 객체 목록 리스트 조회 수행  (0) 2025.06.17
398. (javaScript) 자바스크립트 navigator.mediaDevices.enumerateDevices 사용해 사용 가능한 미디어 장치 목록 확인  (0) 2025.06.17
396. (javaScript) 자바스크립트 AWS Kvs WebRtc 생성 된 신호 채널 ARN 리스트 목록 확인 - listSignalingChannels  (0) 2025.06.16
395. (javaScript) 자바스크립트 AWS Kvs Hls StreamArn 스트림 ARN 조회 방법  (0) 2025.06.16
394. (javaScript) 자바스크립트 AWS Kvs WebRtc ChannelArn 채널 ARN 조회 방법  (0) 2025.06.16
'JavaScript' Related Articles more
Comments