JavaScript 브라우저 창을 전체화면으로 전환하는 스크립트

스크립트 개요

이 스크립트는 브라우저의 창을 전체화면으로 전환하도록 합니다.

사용 시 주의사항

전체화면으로 전환하는 함수는 강제로 호출될 수 없습니다. 이를 실행할 경우 브라우저는 경고를 출력하며 진행하지 않으려 할 것입니다.

원활하게 실행하려면 사용자의 선택권이 주어져야 합니다. 예를 들면 버튼 클릭 시 함수 실행으로 해당 함수가 ‘강제로’ 호출되지 않도록 해주세요.

자세한 내용은 하단의 포스트를 참고해보세요.

사용 방법

아래의 코드를 참고합니다.

var docV = document.documentElement;
// 전체화면 설정
function openFullScreenMode() {
    if (docV.requestFullscreen)
        docV.requestFullscreen();
    else if (docV.webkitRequestFullscreen) // Chrome, Safari (webkit)
        docV.webkitRequestFullscreen();
    else if (docV.mozRequestFullScreen) // Firefox
        docV.mozRequestFullScreen();
    else if (docV.msRequestFullscreen) // IE or Edge
        docV.msRequestFullscreen();
}

// 전체화면 해제
function closeFullScreenMode() {
    if (document.exitFullscreen)
        document.exitFullscreen();
    else if (document.webkitExitFullscreen) // Chrome, Safari (webkit)
        document.webkitExitFullscreen();
    else if (document.mozCancelFullScreen) // Firefox
        document.mozCancelFullScreen();
    else if (document.msExitFullscreen) // IE or Edge
        document.msExitFullscreen();
}

해당 함수를 버튼의 onclick 속성 또는 a 태그의 링크 등으로 설정합니다.

참고자료

• How TO – Fullscreen : https://www.w3schools.com/howto/howto_js_fullscreen.asp