[JavaScript] FullScreen Mode (전체화면 모드)

///// JavaScript

모바일에서 웹브라우져에서 주소창을 없애려는 노력이 많다.

포기하고 있었는데... 이런 방법도 있으니 참고 !

모바일이냐 데스크탑이냐에 관계없이 웹브라우져의 기본 기능으로서 제공되는 것이다.

자바스크립트는 정말 훌륭하지만, 아직은 통일이 안되어서(?) 밴더프리픽스를 써야만하는 지저분한 단계인 것 같다.

///// requestFullScreen (풀스크린을 요청하기)

<script>

// 원하는 DOM객체를 인자로 받는다.

function startFS(element) {

if(element.requestFullScreen) {

element.requestFullScreen();

} else if(element.webkitRequestFullScreen ) {

element.webkitRequestFullScreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen(); // IE

}

}

</script>

///// exitFullscreen (풀스크린에서 나오기)

<script>

// document만 인자로 받도록 하자!

function exitFS(element) {

if (element.exitFullscreen){

element.exitFullscreen();

}else if(element.cancelFullScreen) {

element.cancelFullScreen();

} else if(element.webkitCancelFullScreen ) {

element.webkitCancelFullScreen();

} else if(element.mozCancelFullScreen) {

element.mozCancelFullScreen();

} else if (element.msExitFullscreen) {

                element.msExitFullscreen(); // IE        

}

}

</script>

///// only user can do  (오직 사용자만 풀스크린을 요청할 수 있다)

사용자의 행동에 의해서만 동작하게 설계되었다고 한다.

바로 실행되게 스크립트를 만들거나 onload나 JQuery의 ready같은 것으로 시작과 동시에 풀스크린을 할 수 는 없다는 것 같다.

<button onclick="startFS(document)">Fullscreen</button>

<button onclick="exitFS(document)">exit</button>

///// IE의 경우 ActiveX(액티브엑스)를 사용하여 웹페이지의 시작과 동시에 또는 원할 때 풀스크린이 가능하다.

<script>

// IE

    function max() {

        var wscript = new ActiveXObject("Wscript.shell");

        wscript.SendKeys("{F11}");

    }

    max();

</script>

///// 참조

Building an amazing fullscreen mobile experience:

http://www.html5rocks.com/en/mobile/fullscreen/

HOW TO USE THE FULLSCREEN API:

http://www.webdesignerdepot.com/2013/03/how-to-use-the-fullscreen-api/

How to enable IE full-screen feature like firefox and chrome:

http://stackoverflow.com/questions/13503016/how-to-enable-ie-full-screen-feature-like-firefox-and-chrome