[JavaScript] 자바스크립트로 전체 화면 표시하기

105_자바스크립트로 전체 화면 표시하기

[적용]

• 전체 화면으로 콘텐츠를 표시하고 싶을 때
• 동영상을 전체 화면으로 재생하고 싶을 때
• 이어지는 콘텐츠를 표시하고 싶을 때

---

[문법]

메소드	의미	반환
element.requestFullscreen()	전체 화면으로 표시	Promise
document.exitFullscreen()	전체 화면 해제	Promise

---

[내용]

전체 화면 전환은 requestFullscreen()을 사용한다.

동영상이나 프레젠테이션 콘텐츠를 전체 화면으로 표시할 때 유용하다.

브라우저에서 해당 메소드가 지원되지 않는 경우 별도의 메소드로 브라우저를 명시하여 사용한다.

다음 샘플을 확인해 보자.

const btn = document.querySelector('#btn');
btn.addEventListner('click', (event) => {
	// 전체 화면 전환
    myRequestFullScreen(document.body);
});

function myRequestFullScreen(element) {
	if (element.requestFullscreen) {
    	// 표준 사양
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
    	// 사파리(safari), 크롬(Chrome)
        element.webkitRequestFullscreen) {
    } else if (element.mozRequestFullScreen) {
    	// 파이어폭스(Firefox)
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
    	// 인터넷 익스플로러 11+ (IE 11+)
        element.msRequestFullscreen();
    }
}

 

전체 화면 해제는 전달 인수 없이 document 메소드를 사용한다.

브라우저에 따라 지원되지 않는 경우 requestFullscreen()과 같이 브라우저를 명시하여 사용한다.

다음을 확인해 보자

const btnExit = document.querySelector('#btnExit');
btnExit.addEventListener('click', (event) => {
	// 전체 화면 해제
    myCancelFullScreen();
});

function myCancelFullScreen() {
	if (document.exitFullscreen) {
    	// 표준 사양
        document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
    	// 사파리(Safari), 크롭(Chrome)
        document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
    	// 파이어폭스(Firefox)
        document.mozCancelFullscreen();
    } else if (document.msCancelFullscreen) {
    	// 인터넷 익스플로러 11+ (IE 11+)
        document.msExitFullscreen();
    }
}

 

 

---

 

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김