[javascript] 브라우저 전체화면 스크립트

브라우저를 전체화면(풀스크린)으로 전환해주는 버튼 스크립트.

전체화면 버튼을 클릭하면 웹브라우저가 전체화면으로 변경되는 동시에, 창모드 버튼이 활성화 되고 전체화면 버튼은 비활성화 된다.

창모드를 버튼 클릭시 웹브라우저는 이전 크기로 돌아가며 전체화면 버튼이 활성화되고 창모드 버튼은 안보이게 된다.

 

 

HTML

<a class="fullscreen" href="#" title="전체화면" onclick="openFullScreenMode()">
    전체화면
</a>
<a class="close-fullscreen" href="#" title="창모드" onclick="closeFullScreenMode()">
    창모드
</a>

 

 

CSS

 

.close-fullscreen {display: none}

 

 

javascript

var doc = document.documentElement;
// 전체화면 설정
function openFullScreenMode() {
    if (doc.requestFullscreen)
        doc.requestFullscreen();
    else if (doc.webkitRequestFullscreen) // Chrome, Safari (webkit)
        doc.webkitRequestFullscreen();
    else if (doc.mozRequestFullScreen) // Firefox
        doc.mozRequestFullScreen();
    else if (doc.msRequestFullscreen) // IE or Edge
        doc.msRequestFullscreen();
    $('.fullscreen').hide();
    $('.close-fullscreen').show();
}
// 전체화면 해제
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();
    $('.fullscreen').show();
    $('.close-fullscreen').hide();
}