HTML5 Full Screen API 간단 구현

HTML5 Full Screen API 간단 구현

웹 브라우저(Gecko, Webkit 등..)상에서 특정 엘리먼트 영역을 전체 화면(툴바 영역이 보이지 않는)으로 변경할 수 있는 FullScreen API가 있습니다.

API에 대한 설명은 그리 어렵지 않아 따로 설명 드리지 않도록 하겠습니다.

아래는 관련 소스를 모듈화 시킨 코드 입니다.

1. JSBin 소스 링크:

http://jsbin.com/ayicib/3

2.모듈 사용방법:

window.onload = function () {

        var contextStart = document.getElementById('specialstuffStart');

        var btnStart = document.getElementById('fsbuttonStart');
        var btnEnd = document.getElementById('fsbuttonEnd');

        bind(btnStart, 'click', function () {
            FullScreen.on(contextStart, function (e) {
                btnStart.style.display = 'none';
                btnEnd.style.display = 'block';
            }, function (e) {
                btnStart.style.display = 'block';
                btnEnd.style.display = 'none';
            });
        }, false);

        bind(document, 'keyup', function (e) {
            // space key
            if (e.keyCode === 32) FullScreen.off();
        }, false);
    }

    function bind(elem, type, handler, capture) {
        type = typeof type === 'string' ? type : '';
        handler = typeof handler === 'function' ? handler : function () { ; };
        capture = capture || false;

        if (elem.addEventListener) {
            elem.addEventListener(type, handler, capture);
        }
        else if (elem.attachEvent) {
            elem.attachEvent('on' + type, handler);
        }

        return this;
    }

FullScreen.on(contextStart, function (e) {
                btnStart.style.display = 'none';
                btnEnd.style.display = 'block';
            }, function (e) {
                btnStart.style.display = 'block';
                btnEnd.style.display = 'none';
            });

FullScreen.on(context, open, close);

context: 전체화면 영역

open: 전체화면 open 시 이벤트 핸들러

close: 전체화면  close 시 이벤트 핸들러

        bind(document, 'keyup', function (e) {
            // space key
            if (e.keyCode === 32) FullScreen.off();
        }, false);

FullScreen.off(): 전체화면 중지.

3. 실행화면 및 브라우저 지원 상황:

 실행화면:

브라우저 지원 상황:

참고 사이트:

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/