[자바스크립트] JavaScript : FullScreen API

FullScreen API?
  PPT 프리젠테이션 모드와 같은 화면으로 변경시켜주는 API임 
  

Demo Ex)    

https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/fullscreen/crossBrowserCentre.html

https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/fullscreen/slideshow.html

FullScreen API 업데이트 
MS IE v11 에서부터 FullScreen API가 지원이 됨
API는 FullScreen이 Fullscreen으로 소문자로 변경되고 cancelFullScreen에서 cancel이 exit으로 변경됨     
Pre-spec Spec Change
fullScreenEnabled fullscreenEnabled S → s
fullScreenElement fullscreenElement S → s
requestFullScreen() requestFullscreen() S → s
cancelFullScreen() exitFullscreen() cancel → exit, S→ s
fullscreenchange fullscreenchange None
 

참고   

http://generatedcontent.org/post/70347573294/is-your-fullscreen-api-code-up-to-date-find-out-how-to?utm_source=html5weekly&utm_medium=email

예제코드

// full-screen support 
if (document.fullscreenEnabled || 
  document.webkitFullscreenEnabled || 
  document.msFullscreenEnabled ||
  document.mozFullScreenEnabled) {
        // full-screen 
        if (!document.fullscreenElement &&
            !document.webkitFullscreenElement &&
            !document.msFullscreenElement &&
            !document.mozFullScreenElement) { 
              if (this.requestFullscreen) {
                  this.requestFullscreen();
              } else if (this.webkitRequestFullscreen) {
                this.webkitRequestFullscreen();
              } else if (this.msRequestFullscreen) {
                this.msRequestFullscreen();
              } else if (this.mozRequestFullScreen) {
                this.mozRequestFullScreen();
              }
          }
 
        // normal-screen 
        else {  
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
              document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            }
      }
    } 
// not support 
else {
      // in reality you should use fallback code here
      alert("Your browser doesn’t support the fullscreen API");
}
[출처] [자바스크립트] JavaScript : FullScreen API|작성자 쪼쪼

지원 현황 (demo 예제 기준)

Browser 
PC IE v11 지원
Chrome 지원
Safari 지원
FireFox 지원
Opera 지원
Mobile Android ~4.3 미지원
Android Kikat 지원
iOS Safari 미지원
  참고 http://caniuse.com/#feat=fullscreen 

[출처] [자바스크립트] JavaScript : FullScreen API|작성자 쪼쪼