크롬(Chrome browser) 브라우져 풀스크린(Full Screen)으로 바꾸기

크롬 브라우져나 기타 다른 브라우져를 앱으로 사용할때 특히 URL을 보여주고 싶지 않을때 풀 스크린으로 바꾸어 주는 것이 완성된 앱으로서의 기본적인 사항일 것이다.

다음은 크롬 브라우져를 풀스크린으로 바꾸는 방법이다.

  1. 키보드에서 F11  키를 누르면 바로 풀스크린으로 바뀐다.
  2. 브라우져 맨위 오른쪽 끝에 점 3개를 크릭하면 옵션메뉴가 나오고 중간에 사각형 아이콘을 클릭하면 풀스크린으로 바뀐다.
크롬옵션오픈
크롬옵션오픈
크롬풀스크린 옵션
크롬풀스크린 옵션

  1. 아래의 자바스크립으로 위의 #1, #2를 하지 않고도 풀스크린으로 바꿀수 있다.<script>

    function myFullFunction() {

    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {

    docElm.webkitRequestFullScreen();
    }

    }

    </script>

<body onload=”myFullFunction()”>

 

하지만 위의 코드가 문제가 될수 있다. 테이블릿이나 전화기 또는 크롬북 등에서는

“Failed to execute ‘requestFullScreen’ on ‘Element’: API can only be initiated by a user gesture.”

즉 어떤 이벤트라도 만들어야만 제대로 작동할 수 있는 것이기 때문이다.

아직 특별히 다른 방법은 찿지 못했지만 아래의 방식으로 워크어라운드 할 수 있지만 권장하지는 않는다.

 

function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}

document.addEventListener(“keypress”, function(e) {
if (e.keyCode === 13) {
toggleFullScreen();
}
}, false);

즉 앤터키나 리턴키를 다시 클릭해야만 하기 때문이다.

 

이렇게 풀스크린에서 다시 일반모드로 돌아갈려면 위의 #1 혹은 #2 를 하거나  마우스 커서를 브라우져 스크린 맨위쪽으로 옮기면 다시 정상모드로 돌아 갈수 있는 X자 표시를 클릭하면 된다.