[책] 자바스크립트 코드 레시피 278 - 96일차

전체 화면 표시하기

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

구문

element.requestFullscreen(); // 전체 화면으로 표시
document.exitFullscreen(); // 전체 화면 해제

설명

전체 화면 전환은 requestFullscreen() 을 사용합니다. 동영상이나 프레젠테이션 콘텐츠를 전체 화면으로 표시할 때 유용합니다. 브라우저에서 해당 메소드가 지원되지 않는 경우 별도의 메소드로 브라우저를 명시하여 사용합니다.

전체 화면 전환

window.onload = () => {
    // 전체 화면 전환
    const requestfull = document.querySelector('.btn_screen-requestfull');
    requestfull.addEventListener('click', (event) => { myRequestFullScreen(document.body); });
    function myRequestFullScreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen(); // 표준 사양
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(); // 사파리, 크롬
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen(); // 파이어폭스
        } else if (element.msRequestFullScreen) {
            element.msRequestFullScreen(); // 엣지
        }
    }
}

전체 화면 해제

window.onload = () => {
    // 전체 화면 해제
    const exitfull = document.querySelector('.btn_screen-exitfull');
    exitfull.addEventListener('click', (event) => { myCancelFullScreen(); });
    function myCancelFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen(); // 표준 사양
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen(); // 사파리, 크롬
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen(); // 파이어폭스
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen(); // 엣지
        }
    }
}