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

---

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

---

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / requestFullscreen


- 사전) requestFullscreen 간략 설명 정리 : 

  >> requestFullscreen 는 HTML5 Fullscreen API의 메서드로, 브라우저에서 특정 요소를 전체 화면 모드로 전환할 때 사용합니다. 

    - 반환값 : Promise 객체를 반환합니다. 성공 시 fulfilled, 실패 시 rejected
  
  >> requestFullscreen 는 주로 비디오 플레이어, 이미지 뷰어, 게임 화면 등에 활용됩니다.

  >> requestFullscreen 호출 간단 소스 : 
  
    element.requestFullscreen()
      .then(() => {
        console.log('전체 화면 모드로 전환 성공');
      })
      .catch(err => {
        console.error(`전체 화면 전환 실패: ${err.message}`);
      });

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





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

// [HTML Body 컴포넌트 선언]
<textarea id="subscribeInput" class="form-control border-strong big-input" placeholder="구독 모니터링 자동 로그가 표시됩니다." style="min-height:350px"></textarea>


// [자바스크립트 소스 코드]
const subscribeInput = document.getElementById('subscribeInput');

var uagent = navigator.userAgent.toLowerCase();
var android_agent = uagent.search("android");
var iphone = uagent.search("iphone");

console.warn("subscribeLogRealShow : uagent : ", uagent);

// [접속 디바이스 분기 처리 전송 실시]
if (android_agent > -1 || iphone > -1) {
    console.log("");
    console.log("=========================================");
    console.log("[접속 환경] : Mobile");
    console.log("=========================================");
    console.log("");

    alert("\nsubscribeLogRealShow : 로그 실시간 전체 화면 모니터링 보기 기능은 PC 환경에서만 사용하실 수 있습니다.\n");
    return; // ✅ PC 환경에서만 기능 지원하도록 return 처리
}

// [Window confirm 팝업창 호출]
var confirm = window.confirm('\n' + "구독 로그 모니터링 영역을 전체 화면으로 보시겠습니까 ??" + "\n");
                
if(confirm == true){ // 팝업창 확인 클릭
                    
  // ✅ 요소를 전체 화면으로
  if (subscribeInput.requestFullscreen) {
    console.warn("[if] : subscribeInput.requestFullscreen");

    await subscribeInput.requestFullscreen();
  } else if (subscribeInput.webkitRequestFullscreen) { // Safari
    console.warn("[else if] : subscribeInput.webkitRequestFullscreen");

    await subscribeInput.webkitRequestFullscreen();
  } else if (subscribeInput.msRequestFullscreen) { // Edge (레거시)
    console.warn("[else if] : subscribeInput.msRequestFullscreen");

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

    alert("\nFullscreen API를 지원하지 않습니다.\n");
    //throw new Error('Fullscreen API를 지원하지 않습니다.');
  }

}

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





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

[웹 requestFullscreen 메소드 설명]

https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen


[textarea keyup 이벤트 사용해 실시간 텍스트 입력 글자수 확인 실시]

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

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

 

---

[참고 사이트]

​

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

28. (jquery/제이쿼리) textarea keyup 이벤트 사용해 실시간 텍스트 입력 글자수 확인 실시

---