491. (javaScript) [간단 소스] document.addEventListener('fullscreenchange') 사용해 전체 화면 활성 및 비활성 상태 감지 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

---

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / 간단 소스 / fullscreenchange / 전체 화면


- 사전) fullscreenchange 간단 설명 정리 : 

  >> fullscreenchange 는 Fullscreen API에서 제공하는 상태 변경 이벤트로, 전체 화면으로 진입하거나 (활성) 전체 화면을 종료할 때 (비활성/복귀) document 에 발생합니다.

  >> 현재 전체 화면 요소는 document.fullscreenElement로 확인 가능합니다

    - 진입(활성) : document.fullscreenElement가 해당 요소(HTMLElement)
    - 종료(비활성/복귀) : document.fullscreenElement === null

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





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

-----------------------------------------------
[requestFullscreen : 전체 화면 전환 요청 소스 코드]
-----------------------------------------------
if (subscribeInput.requestFullscreen) {
  await subscribeInput.requestFullscreen();

} else if (subscribeInput.webkitRequestFullscreen) { // Safari
  await subscribeInput.webkitRequestFullscreen();

} else if (subscribeInput.msRequestFullscreen) { // Edge (레거시)
  await subscribeInput.msRequestFullscreen();

} else {
  console.error("[else] : Fullscreen API 를 지원하지 않습니다.");
}



-----------------------------------------------
[(단일 리스너 등록) fullscreenchange : requestFullscreen 이벤트 발생 및 전체 화면 종료 이벤트 감지]
-----------------------------------------------
document.addEventListener('fullscreenchange', (handler) => {
  console.log("[fullscreenchange] : [start] : ", handler);

  try {

    // ✅ 전체 화면 상태 체크 수행
    if (document.fullscreenElement) {                                    
      console.log('전체 화면 활성 : ', document.fullscreenElement); // 활성 (진입) 상태
    }
    else {
      console.warn('전체 화면 비활성 (복귀)'); // 비활성(해제) 상태
      
    }
  }
  catch (exception) {
    console.error("[fullscreenchange] : [Exception] : 예외 상황 발생 : ", exception);
  }

});



-----------------------------------------------
[(다중 리스너 등록) 'fullscreenchange','webkitfullscreenchange','mozfullscreenchange','MSFullscreenChange' : 구형/레거시 대응]
-----------------------------------------------
const changeEvents = ['fullscreenchange','webkitfullscreenchange','mozfullscreenchange','MSFullscreenChange'];
changeEvents.forEach(evt => {

  document.addEventListener(evt, (handler) => {
    console.log("[fullscreenchange] : [start] : ", handler);

    try {

    }
    catch (exception) {
      console.error("[fullscreenchange] : [Exception] : 예외 상황 발생 : exception");
    }

  });

});

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





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

[간단 소스] 자바스크립트 특정 태그 지정해 requestFullscreen PC 전체 화면 보기 설정

https://kkh0977.tistory.com/8563

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


[자바스크립트 requestFullscreen , exitFullscreen 사용해 브라우저 전체 화면 수행 및 전체 화면 종료 실시]

https://kkh0977.tistory.com/4771

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8563

483. (javaScript) [간단 소스] 자바스크립트 특정 태그 지정해 requestFullscreen PC 전체 화면 보기 설정

---