투케이2K

568. (javaScript) 자바스크립트 document.addEventListener visibilitychange 이벤트 사용해 실시간 브라우저 표시 및 보이는 상태 확인 본문

JavaScript

568. (javaScript) 자바스크립트 document.addEventListener visibilitychange 이벤트 사용해 실시간 브라우저 표시 및 보이는 상태 확인

투케이2K 2026. 7. 7. 19:11
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript / visibilitychange / visible / hidden


- 사전) 👉 document.visibilityState 간략 설명 : 

  >> document.visibilityState 는 현재 웹 페이지가 사용자에게 보이는 상태인지 여부를 알려주는 Document API 입니다.

  >> document.visibilityState 가 주로 사용 되는 경우

    - 사용자가 다른 탭으로 이동했는지 감지
    - 브라우저가 백그라운드 상태인지 감지
    - 동영상 자동 일시정지
    - 실시간 데이터 조회 중지
    - 성능 최적화 및 배터리 절약

  >> document.visibilityState 상태 값
  
    - "visible" : 페이지가 사용자에게 보이는 상태
    - "hidden" : 탭이 백그라운드에 있거나 최소화된 상태

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





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

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<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">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

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

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

    </style>





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







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


    // -----------------------------------------------------------------
    // ✅ [Window.onload 웹 브라우저 로드 완료]
    // -----------------------------------------------------------------
    window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

            // ------------------------------------------------
            // 🟦 document.visibilityState 간략 설명
            // ------------------------------------------------ 
            /*
            1. document.visibilityState 는 현재 웹 페이지가 사용자에게 보이는 상태인지 여부를 알려주는 Document API 입니다.
            2. document.visibilityState 가 주로 사용 되는 경우
                - 사용자가 다른 탭으로 이동했는지 감지
                - 브라우저가 백그라운드 상태인지 감지
                - 동영상 자동 일시정지
                - 실시간 데이터 조회 중지
                - 성능 최적화 및 배터리 절약
            3. document.visibilityState 상태 값
                - "visible" : 페이지가 사용자에게 보이는 상태
                - "hidden" : 탭이 백그라운드에 있거나 최소화된 상태
            */
            // ------------------------------------------------ 


            // ------------------------------------------------
            // 🟦 visibilitychange 이벤트 지원 여부 체크 함수 생성
            // ------------------------------------------------ 
            const visibilitychangeSupported = function (){
                try {
                    if (typeof document !== 'undefined' && 'visibilityState' in document && 'hidden' in document) {
                        console.log('visibilitychangeSupported : Page Visibility API 지원');

                        return true;
                    } else {
                        console.error('visibilitychangeSupported : Page Visibility API 미지원');

                        return false;
                    }
                }
                catch (exception){
                    console.error('visibilitychangeSupported : ', exception);

                    return false;
                } 
            };


            // ------------------------------------------------
            // 🟦 visibilitychange 이벤트 리스너 등록
            // ------------------------------------------------ 
            if (visibilitychangeSupported() == true){
                
                document.addEventListener('visibilitychange', () => {
                    console.log('visibilitychange running : ', new Date().toLocaleTimeString(), ' : ' ,document.visibilityState);
                });

            }


            // ------------------------------------------------
            // 🟦 visibilitychange 이벤트 리스너 테스트 방법 정의
            // ------------------------------------------------ 
            /*
            1. 현재 브라우저 탭에서 다른 브라우저 탭으로 이동 후 다시 복귀 수행
            2. 현재 페이지가 열린 상태에서 브라우저 최소화 수행
            3. 현재 브라우저창을 백그라운드로 내린 후 다시 포그라운드 상태로 전환 수행
            4. window.open 시 팝업에 포커스 이동 시 상태 값 전환 수행
            5. 모바일 브라우저 테스트 : 
              - 웹페이지 접속
              - 홈 버튼 누르기
              - 다시 브라우저 진입
            */
            // ------------------------------------------------ 
            const btn = document.getElementById('btn');

            btn.addEventListener('click', async() => {
                
                const popup = window.open(
                    'https://www.naver.com',
                    '_blank'
                );

                popup.focus(); // 👉 포커스 주입

            });


            // ------------------------------------------------
            // 🟦 출력 되는 로그 예시
            // ------------------------------------------------ 
            /*
            visibilitychangeSupported : Page Visibility API 지원

            👉 버튼 클릭 이벤트 발생 > window.open 열기
            visibilitychange running :  오전 8:20:14  :  hidden

            👉 다시 원래 브라우저 탭으로 복귀
            visibilitychange running :  오전 8:20:16  :  visible
            */
            // ------------------------------------------------ 
            
        }
        catch (exception) {
            console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
        }

    }; 
      
    </script>


</head>


<body>

    <!-- 이벤트를 동작 시키기 위한 버튼 생성 영역 -->     
    <button id="btn">버튼 클릭 수행</button>


</body>

</html>

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





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

▶️ 567. (javaScript) 자바스크립트 웹 브라우저에서 앱 딥링크 (Deep Link) 스키마 (Scheme) 앱 실행 및 앱 마켓 페이지 이동 수행

https://kkh0977.tistory.com/8956

https://blog.naver.com/kkh0977/224338399572


▶️ 552. (javaScript) [간단 소스] 자바스크립트 window.screen 사용해 브라우저 화면 가로 , 세로 모드 확인 및 change 화면 회전 감지 이벤트 확인

https://kkh0977.tistory.com/8914

https://blog.naver.com/kkh0977/224315416944


▶️ 550. (javaScript) [간단 소스] 자바스크립트 window.visualViewport.resize 사용해 사용자 눈에 실제 보이는 영역 화면 변경 이벤트 감지 수행

https://kkh0977.tistory.com/8905

https://blog.naver.com/kkh0977/224312032577


▶️ 545. (javaScript) [간단 소스] 자바스크립트 devicePixelRatio 및 body.style.zoom 브라우저 화면 확대 및 축소 비율 값 확인 및 변경 수행

https://kkh0977.tistory.com/8879

https://blog.naver.com/kkh0977/224304198315


▶️ 117. (javascript/자바스크립트) 안드로이드 : 카카오 인앱 브라우저에서 크롬 브라우저로 이동 실시

https://kkh0977.tistory.com/1188

https://blog.naver.com/kkh0977/222492295110?trackingCode=blog_bloghome_searchlist

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

'JavaScript' 카테고리의 다른 글

570. (javaScript) 자바스크립트 window.performance 사용해 resource duration 리소스 (css , js , img 등) 다운로드 시간 확인  (0) 2026.07.09
569. (javaScript) 자바스크립트 동적 js 파일 추가 및 외부 js 파일 로드 시 타임스탬프 추가해 캐시 초기화 수행 - QueryString 쿼리 스트링 추가  (0) 2026.07.09
567. (javaScript) 자바스크립트 웹 브라우저에서 앱 딥링크 (Deep Link) 스키마 (Scheme) 앱 실행 및 앱 마켓 페이지 이동 수행  (0) 2026.07.06
566. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 Custom Table Style 커스텀 그리드 형식 표 테이블 스타일 지정 및 기본 이벤트 확인  (0) 2026.07.02
565. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 기본 배열 데이터 Grid 그리드 형식 표 그리기 및 페이징 처리 수행  (0) 2026.06.30
'JavaScript' Related Articles more
Comments