jQuery, Java Script : 자바 스크립트 전체 화면 API : 예제, 구현

jQuery, Java Script : 자바 스크립트 전체 화면 API : 예제, 구현

 

전체 화면 API는 전체 웹 컨텐츠를 페이지에 표시 할 수 있는 쉬운 방법입니다. 키보드에서 F11 키를 누르는 것과 매우 유사하지만 개발자가 선택하여 수행 할 수 있습니다. 이미지를 클릭하면 브라우저를 전체 화면으로 볼 수 있습니다.

이 기능의 가장 좋은 점은 전체 페이지일 필요는 없으며 HTML 요소를 전체 화면으로 만들 수 있다는 것입니다. 즉, 전체 페이지를 항상 전체 화면으로 표시하는 대신 전체 화면 API를 이미지에 할당하고 이미지를 클릭하면 이미지를 전체 화면으로 집중할 수 있습니다.

 

 

전체 화면 API 지원

불행히도 모든 브라우저가 이 기능을 지원하는 것은 아니므로, 사용하기 전에 방문자 브라우저가 이 기능을 지원하는지 확인해야합니다. 사용하는 브라우저가 지원한다면 사용할 수 있고, 브라우저가 이 기능을 지원하지 않으면 전체 화면을 사용하는 대신 다른 것을 할 수 있습니다. 웹 사이트에 따르면 전체 화면 API 사용은 현재 Firefox, Chrome / Safari 및 Opera에서 지원됩니다. 

• Chrome 15+
• Firefox 10+
• Safari 5.1+
• Opera 12.50+

Safari 5.1은 전체 화면에서 키보드 사용을 지원하지 않습니다.

 

 

브라우저가 전체 화면 API를 지원하는지 확인

브라우저가 이 기능을 지원하는지 확인하려면 다음 코드 스니펫을 사용할 수 있습니다.

 

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

 

requestFullscreen 메소드를 사용합니다. true를 리턴하면 전체 화면 API를 사용할 수 있습니다. Firefox와 Chrome에는 mozRequestFullScreen 및 webkitRequestFullScreen 함수를 사용하여 moz 및 webkit이 접두사로 사용됩니다. 이러한 방법을 통과하면 전체 화면 방법을 사용할 수 있습니다.

 

 

 

전체 화면 종료

전체 화면 모드를 종료하려면 전체 화면을 닫고 다시 정상으로 돌아가는 방법도 있습니다. 다음은 페이지의 버튼에 첨부하여 전체 화면 API를 취소하고 일반 화면으로 돌아갈 수 있는 코드 스니펫입니다.

 

if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

 

 

전체 화면 API 스타일링

이 기능과 함께 CSS는 전체 화면 모드에서만 스타일을 변경하기 위한 새로운 의사 클래스를 제공합니다.

 

html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

 

 

Screenfull.js Github 프로젝트

최근 Github에서 HTML5 전체 화면 API의 래퍼 역할을하는 훌륭한 Javascript 플러그인을 발견했습니다. 원시 Javascript 대신 이 플러그인을 사용하면 원시 Javascript로 작업 할 때 발생하는 모든 크로스 브라우저 문제를 처리 할 수 있다는 이점이 있습니다. screenfull.js를 사용하려면 다음 스니펫을 사용하기 만하면 됩니다.

 

if ( screenfull ) {
    screenfull.request();
}

 

 

Screenfull.js 예제 사용

screenfull.js를 사용하려면 screenfull.js를 사용하는 몇 가지 예가 매우 쉽습니다. 전체 화면이 지원되는지 확인하려면 다음 스니펫을 사용합니다.

 

<script>
$(function() {
if(screenfull)
{
    $('#supported').text('Yes');
} else {
    $('#supported').text('No');
}
});
</script>

<p>Does your browser support full screen API? <span id="supported"></span></p>

 

브라우저가 전체 화면 API를 지원한다는 것을 알면 이 코드를 사용하여 버튼의 클릭 이벤트에서 전체 화면 모드를 켤 수 있습니다.

 

 

var target = $('#target')[0]; // Get DOM element from jQuery collection
$('#button').click(function() {
    if ( screenfull ) {
        screenfull.request( target );
    }
});

 

이 코드 스니펫을 사용하여 페이지의 모든 이미지에 첨부 할 수도 있습니다.

 

 

$('img').click(function() {
     if ( screenfull ) {
     screenfull.toggle( this );
     }
});