EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

msRequestFullscreen method

Request that the browser display an element in full-screen mode.

IE11

 

Syntax

Element.msRequestFullscreen();

Parameters

This method has no parameters.

Return value

This method does not return a value.

Remarks

By default, content in an iframe is not allowed to display in full-screen mode. The iframe itself can be displayed in full-screen mode because it is an element under the original page. For the contents of an iframe to display in full-screen mode, you must set the allowfullscreen attribute.

Even if the functionality is available, a successful request for full-screen display isn't guaranteed. You can disable full-screen mode, for example, by not applying the allowfullscreen attribute to an iframe element. To exit full-screen mode, the user can press ESC or F11. On a computer without a keyboard, pressing the Windows button will exit full-screen mode. In addition, if the user navigates to another webpage, the screen is set back to normal display.

Because the standard is still in development, expect differences between the implementation between browsers. In some browsers, when an element successfully is in full-screen mode, the image is zoomed using CSS width and height attributes. In other browsers, the full-screen element remains the same size with a black background around the content. If you want to display an element fully edge-to-edge, use :-ms-fullscreen and manually scale the element using CSS width and height.

Examples

This example uses generic images and videos, which you can replace with your own. When you click a video, image, or color box, it will try to display full screen. You'll get a prompt asking if you want to keep it full screen. See the live demo.


<!DOCTYPE html>
<html >
<head>
    <title>Fullscreen API test</title>
   <style>
      video {
        /* Push video element over */
        position:relative;
        left: 350px;
      }
      #div1 {
        background-color:green;
        width:800px; 
        height:500px;
      }
      #div2 {
        background-color:yellow;
        width:700px; 
        height:400px;
      }
      #div3 {
        background-color:red;
        width:300px; 
        height:300px;
      }
    </style>
 
</head>
<body >
  <div id="div1" class="fullScreen" > Div1                
        <div id="div2" class="fullScreen" > Div2        
           <video class="fullScreen" controls="controls" loop="loop" autoplay="autoplay" width="300">
             <source src="demo.mp4" type="video/mp4" /> <!-- support for IE, Firefox, or Chrome -->
             <source src="demo.ogv" type="video/ogg" />
             <source src="demo.webm" type="video/webm" /> 
             Sorry, video isn't supported
           </video>          
           <div id="div3" class="fullScreen" > Div3
             <img class="fullScreen" src="image.jpg"  /> 
           </div>
        </div>     
    </div>
   <script>

    // create click events for all the elements based on class.
    var fsClass = document.getElementsByClassName("fullScreen");
    for (var i = 0; i < fsClass.length; i++) {
      fsClass[i].addEventListener("click", function (evt) { makeFullScreen(evt); }, false);      
    }
    
    function makeFullScreen(evt) {
      // Test for each of the supported versions of full screen APIs and call 
      // either requestFullscreen or cancelFullScreen (or exitFullScreen)
      //  Structure: 
      //  Does the incoming target support requestFullscreen (or prefaced version)
      //  if (there is a fullscreen element) 
      //      then cancel or exit
      //  else request full screen mode

      var divObj = evt.target;  //  get the target element

      if (divObj.requestFullscreen)   
        if (document.fullScreenElement) {
            document.cancelFullScreen();       
        } else {
          divObj.requestFullscreen();
        }
      else if (divObj.msRequestFullscreen)
        if (document.msFullscreenElement) {
            document.msExitFullscreen();
          } else {
          divObj.msRequestFullscreen();
        }
      else if (divObj.mozRequestFullScreen)
        if (document.mozFullScreenElement) {
            document.mozCancelFullScreen();
        } else {
          divObj.mozRequestFullScreen();
        }
      else if (divObj.webkitRequestFullscreen)
        if (document.webkitFullscreenElement) {
            document.webkitCancelFullScreen();
          } else {
          divObj.webkitRequestFullscreen();
        }
      //  stop bubbling so we don't get bounce back
      evt.stopPropagation();

    }

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


See also

Element
msExitFullscreen
Fullscreen example

 

 

표시:
© 2014 Microsoft