전체 화면 API

전체 화면 API를 사용하여 사용자가 동영상, 이미지, 기타 콘텐츠에 집중하도록 할 수 있습니다.

전체 화면 API

새로운 전체 화면 API를 사용하여 주의를 분산시키는 배경이나 다른 앱을 숨기는 동시에 사용자가 특정 요소에 집중하도록 할 수 있습니다.

W3C 전체 화면 사양이 최종 버전이 아니기 때문에 대부분의 브라우저 공급업체에서는 API 앞에 고유 식별자를 추가합니다. 이 경우 Microsoft에서는 ms를 사용합니다. 여기에 표시된 대부분의 예제처럼 모든 접두사에서 전체 화면 모드를 요청하는 단일 함수를 사용하는 것이 좋습니다. 최상의 성능을 얻으려면 W3C API 이름 뒤에 접두사가 붙은 버전을 배치합니다.

참고  여기에 나열된 예제는 이 항목의 게시 날짜를 기준으로 접두사가 붙은 API를 표시하며 언제든지 변경될 수 있습니다.

이 표에서는 Internet Explorer 11에서 사용 가능한 전체 화면 API를 보여 줍니다.

멤버유형 설명
msRequestFullscreen 메서드이미지, 동영상 또는 기타 요소의 전체 화면 표시를 요청합니다.
msExitFullscreen 메서드요소를 전체 화면 모드에서 원래 크기로 되돌립니다.
msFullscreenElement 속성전체 화면 모드로 표시되는 최상위 또는 현재 요소를 반환합니다. 그렇지 않으면 undefined를 반환합니다.
msFullscreenEnabled 속성문서에서 요소를 전체 화면 모드로 표시할 수 있도록 하는 경우 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
MSFullscreenChange 이벤트요소가 전체 화면 모드로 표시되거나 전체 화면 모드를 종료할 때 발생합니다.
MSFullscreenError 이벤트요소에 대해 전체 화면 표시가 요청되었지만 이 요청을 이행할 수 없는 경우에 발생합니다.
:-ms-fullscreen 의사 클래스요소가 전체 화면 모드에 있는지 여부에 따라 특정 CSS 속성을 설정할 수 있게 합니다.
::-ms-backdrop 의사 요소요소가 전체 화면 모드로 표시되는 경우 background 속성을 설정할 수 있게 합니다.
allowfullscreen 특성Iframe 콘텐츠를 전체 화면 모드로 표시할 수 있게 합니다. 누락된 경우 iframe(및 프레임 내의 콘텐츠)만 전체 화면 모드로 이동할 수 있습니다.

 

전체 화면 모드에서 요소를 엽니다.

msRequestFullscreen() 메서드를 호출하여 동영상, 이미지 또는 기타 요소를 전체 화면 모드에서 열 수 있습니다. IE11에서 동영상은 화면을 채우지만 다른 항목(paragraph, div 또는 image 요소)은 동일한 크기로 유지됩니다. ::-ms-backdrop를 사용하여 배경 스타일을 지정하지 않은 경우 화면의 나머지 부분은 검은색입니다.


document.getElementById("myImage").msRequestFullscreen();

IE11에서는 신뢰할 수 없는 콘텐츠가 전체 화면 모드에서 열리지 않도록 할 수 있습니다. 이렇게 하려면 스크립트에서 자동으로 호출하는 대신 단추 클릭과 같은 사용자가 시작한 이벤트에서 msRequestFullscreen을 호출해야 합니다. IE11에서는 콘텐츠가 전체 화면 모드로 전환될 때 콘텐츠를 열어도 되는지 확인하는 메시지를 사용자에게 표시합니다. 사용자가 예를 선택하면 콘텐츠가 열리고, 검은색 배경으로 둘러싸이므로 콘텐츠만 화면에 표시됩니다. 사용자가 모니터를 여러 개 사용하는 경우 하나의 모니터만 전체 화면 표시로 채워집니다.


    // Initiated by a user click on an element 

    function makeFullScreen(divObj) {
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }

전체 화면 모드 종료

사용자가 ESC를 눌러 언제든지 쉽게 전체 화면 모드를 종료할 수 있습니다. 프로그램 제어에서 전체 화면 모드를 종료하려면 msExitFullscreen 메서드를 사용합니다. 요소에 적용되는 msRequestFullscreen과 달리, msExitFullscreendocument 요소에 적용되므로 현재 어떤 요소가 전체 화면 모드에서 열려 있는지는 중요하지 않습니다. 이 예제를 사용하여, 요소를 클릭할 때 전체 화면 모드에서 요소를 열고, 다시 클릭할 때 요소를 원래 크기로 되돌릴 수 있습니다.


<!DOCTYPE html>
<html>
  <head>
    <title>msExitFullscreen API test</title>
  </head>
  <body>
    <div id="div1" class="fullScreen" style="width: 600px; height: 350px; background-color: yellow">
      Div1 
    </div>
    <div id="div2" class="fullScreen" style="width: 600px; height: 350px; background-color: red">
      Div2            
    </div>
    <script type="text/javascript">
      var inFullScreen = false; // flag to show when full screen

      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false) {
            makeFullScreen(evt.target); // open to full screen
          } else {
            reset();
          }
        }, false);
      }

  
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }

      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        inFullScreen = false;
        return;
      }


    </script>
  </body>
</html>


사용자가 다음을 수행하는 경우처럼 다른 작업은 요소를 전체 화면 모드에서 강제로 전환할 수 있습니다.

  • 참을 선택하는 경우
  • 브라우저 인스턴스를 화면 측면으로 끄는 경우
  • 키보드 없이 태블릿 컴퓨터에서 Windows 단추를 클릭하는 경우
  • 현재 전체 화면에 있는 요소를 DOM(문서 개체 모델)에서 제거하는 경우
  • 새 URL로 이동하는 경우
  • 화면 맨 위에서 아래로 살짝 민 경우
  • 화면 맨 아래에서 위로 살짝 민 경우

참고  요소가 전체 화면 모드에 있는 동안 포커스를 잃을 경우 전체 화면 모드를 종료하지 않습니다.

전체 화면 모드에서 요소 찾기

document 요소의 msFullscreenElement 속성을 사용하여 현재 전체 화면 모드로 표시되는 최상위 요소를 찾을 수 있습니다. 이 속성은 전체 화면 모드로 표시되는 요소를 반환합니다. 현재 전체 화면 모드에서 열려 있는 요소가 없으면 null을 반환합니다.

이 예제에서는 클릭하면 msFullscreenElementinnerHTML에 인쇄하는 두 개의 <div> 요소를 보여 줍니다. 한 개


<!DOCTYPE html>

<html>
  <head>
    <title>msFullscreenElement test</title>
    <style>
      /* Add a white border*/
      div {
        border: solid 2px white;
      }
    </style>
  </head>
  <body>
    <div class="fullScreen" id="div-1" style="width:600px; height:350px; background-color:yellow">
      This is Div 1
    </div><p></p>
    <div class="noFullScreen" id="div-2" style="width:600px; height:350px; background-color:red">
       This is Div 2 
    </div>

    <script>
        var inFullScreen = false;  // flag for in or out of full-screen mode. 
        // set up div that doesn't go into full-screen mode on the click event
        var nfsClass = document.getElementsByClassName("noFullScreen");
        for (var i = 0; i < nfsClass.length; i++) {
            nfsClass[i].addEventListener("click", function (evt) {
                evt.target.innerHTML = getFSWindow();
            }, false);
        }



      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false) {
            makeFullScreen(evt.target); // open to full screen
            evt.target.innerHTML = getFSWindow().id;
          } else {
            reset();
          }
        }, false);
      }

     /* // set up any div with fullscreen class to go full screen when clicked
      var fsClass = document.getElementsByClassName("fullScreen");    
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          setTimeout(reset, 10000); // Set a time out for 10 seconds
          makeFullScreen(evt.target); // open to full screen  
          evt.target.innerHTML = getFSWindow();
        }, false);
      }
 */
      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }

      //  reset full screen across several browsers
      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
           document.webkitCancelFullScreen();
        }
        inFullScreen = false;
         return;
       }

       //  get full screen element across several browsers
       function getFSWindow() {
         if (document.fullscreenElement) {
           return document.fullscreenElement;
         }
         else if (document.msFullscreenElement) {
           return document.msFullscreenElement;
         }
         else if (document.mozFullScreenElement) {
           return document.mozFullScreenElement;
         }
         else if (document.webkitFullscreenElement) {
           return document.webkitFullscreenElement;
         }
       }
    </script>
  </body>
</html>


첫 번째 <div>를 클릭하여 전체 화면 모드에서 열면 요소(HTMLDivElement)가 div의 innerHTML에 인쇄됩니다. 다시 클릭하여 전체 화면 모드를 종료합니다. 이제 두 번째 <div>를 클릭하면 전체 화면 모드로 전환하지 않고 undefined 단어가 <div>에 표시됩니다.

전체 화면 모드에서 iframe 사용

기본적으로 iframe은 전체 화면 모드에서 열지만 해당 콘텐츠는 열지 않습니다. iframe은 원본 문서의 자식이고 iframe에 속하는 콘텐츠가 아니기 때문입니다. iframe의 콘텐츠가 악성 사이트일 수 있는 알 수 없는 출처일 수 있습니다. iframe의 콘텐츠를 전체 화면 모드에서 열도록 허용하려면 iframe 요소의 allowfullscreen 특성을 설정합니다.

한 가지 예외는 Adobe Flash입니다. Flash 컨트롤이 iframe을 통해 포함되면 iframe에 allowfullscreen 특성이 설정된지 여부에 관계없이 항상 전체 화면을 표시하도록 허용됩니다.

이 예제에서는 allowfullscreen 설정이 iframe에서 전체 화면 콘텐츠를 표시하는 방식에 어떤 영향을 주는지를 보여 줍니다. 두 iframe은 각각 정확하게 동일한 웹 페이지를 표시합니다. Frame 1 또는 Frame 2로 표시된 단추를 클릭하면 iframe이 전체 화면 모드에서 열립니다. 각 iframe에 표시되는 콘텐츠는 두 프레임에서 동일한 HTML 페이지입니다. 첫 번째 iframe에만 allowfullscreen 특성이 설정되어 있으므로 첫 번째 iframe의 콘텐츠만 전체 화면 모드로 전환할 수 있습니다. 두 번째 iframe의 콘텐츠는 클릭할 때 원래 크기로 유지되며 MSFullscreenError 이벤트가 발생합니다.


<!DOCTYPE html>
<html>
  <head>
    <title>allowfullscreen attribute test</title>
  </head>
  <body>
    <!-- include all prefixed versions of the attribute -->
    <iframe id="frame1" allowfullscreen mozallowfullscreen webkitallowfullscreen width="400" height="300" src="iframeTest.html"></iframe>
    <iframe id="frame2" width="400" height="300" src="iframeTest.html"></iframe>
    <br />
    <button onclick="makeFullScreen('frame1');">Frame 1 full screen</button>
    <button onclick="makeFullScreen('frame2');">Frame 2 full screen</button>
     
    <script type="text/javascript">
      function makeFullScreen(frame) {
        divObj = document.getElementById(frame);
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
          // Moz uses camel case caps on "screen"
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
      }
    </script>
  </body>
</html>


이 예제에서는 이전 예제의 각 iframe에 대한 iframeTest.html 테스트 파일을 보여 줍니다.


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>fullscreen element test file</title>

  </head>
  <body>
    <div class="fullScreen" style="width:600px; height:350px; background-color:yellow">
      This is Div 1
    </div>
    <script>
      // set up any div with fullscreen class to go full screen when clicked
      var inFullScreen = false;

      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false) {
            makeFullScreen(evt.target); // open to full screen
          } else {
            reset();
          }
        }, false);
      }

      document.addEventListener("MSFullscreenError", function (evt) {
        console.error("full screen error has occured " + evt.target);
      }, true);

      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }

      //  reset full screen across several browsers
      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
       else if (document.cancelFullScreen) {
         document.cancelFullScreen();
       }
       else if (document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen();
       }
        inFullScreen = false;
        return;

      }   

    </script>
  </body>
</html>


전체 화면 모드가 가능한지 여부 결정

msFullscreenEnabled 속성은 문서에서 전체 화면 모드가 가능한지 여부를 반환합니다. 기본 용도는 iframe의 contentDocumentallowfullscreen 특성이 설정되었는지 확인하는 것입니다. iframe의 contentDocumentallowfullscreen 특성이 있으면 msFullscreenEnabled는 true를 반환하고, 그렇지 않으면 false를 반환합니다. 일반적으로 msFullscreenEnabled를 사용하여 전체 화면 기능을 검색해서는 안 됩니다.


var isFullScreenEnabled;
if(document.fullscreenEnabled){
   isFullScreenEnabled = document.fullscreenEnabled;
}
else if(document.msFullscreenEnabled){ 
   isFullScreenEnabled = document.msFullscreenEnabled;
} 
else if (document.mozFullScreenEnabled){
   isFullScreenEnabled = document.mozFullScreenEnabled;
}


전체 화면 모드 변경 검색

MSFullscreenChange 이벤트는 요소가 전체 화면 모드로 전환하거나 전체 화면 모드를 종료하는 경우를 검색합니다. 다음 예제에서는 요소가 전체 화면 모드로 전환하거나 종료할 때 콘솔에 메시지를 인쇄합니다.


if (document.requestFullscreen) {
  document.addEventListener("fullscreenchange", function () {
    if (document.fullscreenElement != null) {
      console.info("Went full screen");
    } else {
      console.info("Exited full screen");
    }
  });
}
else if (document.msRequestFullscreen) {
  document.addEventListener("MSFullscreenChange", function () {
    if (document.msFullscreenElement != null) {
      console.info("Went full screen");
    } else {
      console.info("Exited full screen");
    }
  });
}
     // no info on other browsers


요소가 전체 화면 모드로 전환하거나 종료한 후 MSFullscreenChange 이벤트가 발생하므로 현재 상태를 확인할 수 있습니다. 이 예제에서는 msFullscreenElement를 검사하여 전체 화면에 있는 요소가 있는지 확인합니다. 요소가 전체 화면 모드에 있으면 요소가 반환되고, 그렇지 않으면 msFullscreenElement에서 null을 반환합니다.

참고  데모가 실행되면 F12 키를 눌러 F12 개발자 도구를 열고 예제의 출력을 확인합니다. 콘솔 탭을 열어 메시지를 확인합니다. 예제가 전체 화면 모드로 전환하면 "Went full screen(전체 화면으로 전환됨)"이 표시되고 종료하면 "Exited full screen(전체 화면 종료됨)"이 표시됩니다.

전체 화면 모드 오류 catch

전체 화면 모드에는 고유한 오류 이벤트 MSFullscreenError가 있습니다. 전체 화면 모드가 요청되었지만 요청을 이행할 수 없는 경우 이 이벤트가 발생합니다. 이 코드 조각은 MSFullscreenError에 대한 간단한 이벤트 처리기를 보여 줍니다.


document.addEventListener("MSFullscreenError", function (evt) {
  console.error("full screen error has occured " + evt.target);
}, true);


전체 화면 스타일 지정에 CSS 의사 요소 사용

:-ms-fullscreen CSS 의사 클래스 및 ::-ms-backdrop CSS 의사 요소를 사용하면 전체 화면 모드 상태에 따라 페이지 요소 스타일을 변경할 수 있습니다. :-ms-fullscreen을 사용하여 전체 화면 모드에서 요소가 표시되는 방식의 스타일을 변경할 수 있습니다. <div>와 같은 대부분의 요소에서 변경할 수 있는 스타일에는 일반으로 position, color 또는 size가 포함됩니다.

비디오 요소를 제외하고 전체 화면 모드의 요소는 동일한 크기로 유지되며 검은색 배경으로 둘러싸입니다. ::-ms-backdrop 의사 요소를 사용하여 배경을 변경할 수 있습니다. 이미지, 다른 색 또는 테두리일 수 있습니다. 레터박스 또는 필러박스에 표시되는 비디오 요소의 배경은 ::-ms-backdrop의 영향을 받지 않습니다.

이 예제는 IE11에서만 실행되며 브라우저 간 코드를 포함하지 않습니다. 처음에 파란색 상자를 표시합니다. 상자를 클릭하면 전체 화면 모드로 확장되고 상자가 200픽셀 아래, 200픽셀 위로 이동하며 색이 녹색으로 바뀝니다. 이 작업을 위해 :-ms-fullscreen 의사 클래스를 사용하여 전체 화면 모드를 검색하고 새 스타일을 적용합니다. 상자 주위의 배경색은 ::-ms-backdrop 의사 요소를 사용하여 자홍으로 바뀝니다.


<!DOCTYPE html>

<html>
  <head>
    <title>Pseudo element test</title>
    /* this example only works in the Internet Explorer */
      <style type="text/css" media="screen">
        /* Normal view */
        #test {
          width: 200px;
          height: 200px;
          background-color: blue;
        }
   /* W3C section */    
        /* How to display when full screen */ 
       #test:-fullscreen {
         position:absolute;
         left:200px;
         top:200px;
         width: 400px;
         height: 400px;
         background-color: green;
       }
       
       /* What color to show the background */
       #test:-fullscreen::-backdrop {
         background-color: magenta;
       }
   /* Microsoft section */    
        /* How to display when full screen */ 
       #test:-ms-fullscreen {
         position:absolute;
         left:200px;
         top:200px;
         width: 400px;
         height: 400px;
         background-color: green;
       }
       
       /* What color to show the background */
       #test:-ms-fullscreen::-ms-backdrop {
         background-color: magenta;
       }       

    </style>
  </head>
  <body>    
    <div class="fullscreen" id="test">
    </div>

    <script>
      var fsClass = document.getElementsByClassName("fullscreen");

      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
         makeFullScreen(evt.target); // open to full screen
        }, false);
      }

      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
      }

    </script>
  </body>
</html>


요소가 전체 화면 모드에서 표시되는 방식은 브라우저마다 다릅니다. 다른 브라우저는 요소를 확장하여 화면을 채울 수 있지만 배경 의사 요소를 지원하지 않습니다.

요소가 확장되어 화면을 채우고 검은색 배경이 손실되도록 :-ms-fullscreen을 사용하여 동작을 변경할 수 있습니다. 요소가 전체 화면 모드로 전환하면 창 크기에 맞게 CSS 너비 및 높이 속성을 100%로 설정할 수 있습니다. 이 예제에서는 전체 화면을 채우도록 작은 상자를 확장합니다. 또한 :-ms-fullscreen과 동등한 Webkit 항목이 포함됩니다.


<!DOCTYPE html>

<html>
  <head>
    <title>ms-fullscreen pseudo class test</title>

    <style type="text/css" media="screen">
      
      /* Normal view */
      #test {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      
      /* How to display when full screen */ 
      /* Microsoft */
      #test:-ms-fullscreen {
        position:absolute;
        left:0px;
        top:0px;
        width: 100%;
        height: 100%;          
      }
      
            
      /* How to display when full screen */ 
      /* Webkit */
       #test:-webkit-full-screen {
        position:absolute;
        left:0px;
        top:0px;
        width: 100%;
        height: 100%;          
      }
   
      /* Mozilla */
       #test:-moz-full-screen {
      /* Mozilla/Gecko automatically scales to 100% */
       /* put CSS in here*/
      }

    </style>
  </head>

  <body>    
    <div class="fullscreen" id="test"></div>

    <script>
      var fsClass = document.getElementsByClassName("fullscreen");

      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          makeFullScreen(evt.target); // open to full screen
        }, false);
      }
      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }

      }

    </script>
  </body>
</html>


API 참조

msRequestFullscreen
msExitFullscreen
::-ms-background
:-ms-fullscreen
MSFullscreenChange
MSFullscreenError
msFullscreenEnabled
msFullscreenElement
allowfullscreen

사양

전체 화면

 

 

표시:
© 2014 Microsoft