Vollbild-API

Mithilfe der Vollbild-API können Sie sich bei Videos, Bildern und anderen Inhalten die volle Aufmerksamkeit des Benutzers sichern.

Die Vollbild-API

Mithilfe der neuen Vollbild-API können Sie störende Hintergründe oder andere Apps ausblenden und die Aufmerksamkeit von Benutzern auf bestimmte Elemente lenken.

Da die Vollbildspezifikation von W3C noch nicht final ist, stellen die meisten Browseranbieter der API einen eindeutigen Bezeichner voran. In diesem Fall verwendet Microsoft ms. Es empfiehlt sich, eine einzelne Funktion zu verwenden, die den Vollbildmodus präfixübergreifend anfordert, wie in den meisten der hier gezeigten Beispielen zu sehen. Geben Sie zur Optimierung der Leistung zunächst den W3C-API-Namen und im Anschluss die mit Präfix versehenen Versionen an.

Hinweis  Die API mit Präfix in den hier gezeigten Beispielen entspricht dem Stand zum Veröffentlichungsdatum dieses Themas und wird möglicherweise noch geändert.

Die folgende Tabelle zeigt die in Internet Explorer 11 verfügbare Vollbild-API:

ElementTyp Beschreibung
msRequestFullscreen MethodeFordert die Vollbilddarstellung eines Bilds, Videos oder anderen Elements an.
msExitFullscreen MethodeSetzt ein Element aus dem Vollbildmodus auf die ursprüngliche Größe zurück.
msFullscreenElement EigenschaftGibt das oberste bzw. aktuell im Vollbildmodus angezeigte Element zurück. Andernfalls wird "undefined" zurückgegeben.
msFullscreenEnabled EigenschaftGibt "true" zurück, falls Elemente in einem Dokument im Vollbildmodus angezeigt werden können. Andernfalls wird "false" zurückgegeben.
MSFullscreenChange EreignisWird ausgelöst, wenn ein Element im Vollbildmodus angezeigt oder der Vollbildmodus beendet wird.
MSFullscreenError EreignisWird ausgelöst, wenn die Vollbilddarstellung eines Elements angefordert wird, die Anforderung aber nicht erfüllt werden kann.
:-ms-fullscreen PseudoklasseErmöglicht das Festlegen bestimmter CSS-Eigenschaften in Abhängigkeit davon, ob sich ein Element im Vollbildmodus befindet.
::-ms-backdrop PseudoelementErmöglicht das Festlegen der Hintergrundeigenschaften, wenn ein Element im Vollbildmodus angezeigt wird.
allowfullscreen AttributErmöglicht das Anzeigen des Inhalts eines iframe-Elements im Vollbildmodus. Ohne diese Angabe kann nur das iframe-Element (nicht aber dessen Inhalt) in den Vollbildmodus wechseln.

 

Öffnen eines Elements im Vollbildmodus

Rufen Sie die msRequestFullscreen()-Methode auf, um ein Video, Bild oder anderes Element im Vollbildmodus zu öffnen. In IE11 füllt ein Video den gesamten Bildschirm aus, während bei anderen Elementen (paragraph-, div- oder image-Elemente) die Größe beibehalten wird. Der Rest des Bildschirms ist schwarz – es sei denn, Sie gestalten den Hintergrund mithilfe von ::-ms-backdrop.


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

In IE 11 können Sie das Öffnen nicht vertrauenswürdiger Inhalte im Vollbildmodus verhindern. Dazu müssen Sie msRequestFullscreen im Rahmen eines vom Benutzer initiierten Ereignisses (beispielsweise das Klicken auf eine Schaltfläche) und nicht automatisch über ein Skript aufrufen. Beim Wechsel in den Vollbildmodus fragt IE11 den Benutzer, ob der Inhalt geöffnet werden soll. Stimmt der Benutzer zu, wird der Inhalt geöffnet. Er ist von einem schwarzen Hintergrund umgeben, sodass auf dem Bildschirm ausschließlich der Inhalt sichtbar ist. Die Vollbilddarstellung füllt nur einen Monitor, auch wenn der Benutzer über mehrere Monitore verfügt.


    // 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");
      } 

    }

Verlassen des Vollbildmodus

Benutzer können den Vollbildmodus jederzeit durch Drücken von ESC beenden. Beenden Sie den Vollbildmodus in der Programmsteuerung mithilfe der msExitFullscreen-Methode. Im Gegensatz zur msRequestFullscreen-Methode, die auf ein Element angewendet wird, wird msExitFullscreen auf das document-Element angewendet, sodass es keine Rolle spielt, welches Element gerade im Vollbildmodus geöffnet ist. Mit diesem Beispiel können Sie ein Element durch einen Klick im Vollbildmodus öffnen und durch einen erneuten Klick die ursprüngliche Größe des Elements wiederherstellen.


<!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>


Die Beendigung des Vollbildmodus eines Elements kann auch durch andere Aktionen erzwungen werden. Beispiele:

  • Auswählen eines Charms
  • Andocken einer Instanz des Browsers am Bildschirmrand
  • Klicken auf einem Tablet PC ohne Tastatur auf die WINDOWS-TASTE
  • Entfernen des derzeit im Vollbildmodus angezeigten Elements aus dem Dokumentobjektmodell (DOM)
  • Navigieren zu einer neuen URL
  • Streifen vom oberen Bildschirmrand nach unten
  • Streifen vom unteren Bildschirmrand nach oben

Hinweis  Verliert ein Element im Vollbildmodus den Fokus, wird der Vollbildmodus nicht beendet.

Suchen eines Elements im Vollbildmodus

Sie können mit der msFullscreenElement-Eigenschaft für das document-Element das oberste Element ermitteln, das derzeit im Vollbildmodus angezeigt wird. Mit dieser Eigenschaft wird das Element zurückgegeben, das im Vollbildmodus angezeigt wird. Ist momentan kein Element im Vollbildmodus geöffnet, wird null zurückgegeben.

Dieses Beispiel zeigt zwei <div>-Elemente, die msFullscreenElement in ihrem innerHTML-Element ausgeben, wenn sie angeklickt werden. Ein


<!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>


Klicken Sie auf das erste <div>-Element, um es im Vollbildmodus zu öffnen. Das Element (HTMLDivElement) wird in der innerHTML-Eigenschaft des div-Elements ausgegeben. Klicken Sie erneut, um den Vollbildmodus zu verlassen. Wenn Sie nun auf das zweite <div>-Element klicken, wird dieses nicht im Vollbildmodus angezeigt, und im <div>-Element wird die Zeichenfolge undefined angezeigt.

Verwenden eines iframe-Elements im Vollbildmodus

Standardmäßig werden iframe-Elemente im Vollbildmodus geöffnet, nicht aber deren Inhalt. Der Grund: Das iframe-Element ist ein untergeordnetes Element des ursprünglichen Dokuments. Dies gilt jedoch nicht für den Inhalt: Dieser gehört dem iframe-Element an. Der Inhalt des iframe-Elements können unbekannter Herkunft sein und unter Umständen von einer Website mit Schadsoftware stammen. Damit der Inhalt eines iframe-Elements im Vollbildmodus geöffnet werden kann, legen Sie das allowfullscreen-Attribut für das iframe-Element fest.

Für Adobe Flash besteht eine Ausnahme. Wenn ein Flash-Steuerelement per iframe-Element eingebettet wird, ist dafür immer die Anzeige im Vollbildmodus möglich. Dies ist unabhängig davon der Fall, ob für das iframe-Element das allowfullscreen-Attribut festgelegt ist.

Dieses Beispiel zeigt die Auswirkungen von allowfullscreen auf die Darstellung des Inhalts eines iframe-Elements im Vollbildmodus. Die beiden iframe-Elemente zeigen exakt die gleiche Webseite. Durch Klicken auf die Schaltfläche Frame 1 oder Frame 2 wird ein iframe-Element im Vollbildmodus geöffnet. Beim Inhalt in den beiden iframe-Elementen handelt es sich jeweils um die gleiche HTML-Seite. Da das allowfullscreen-Attribut jedoch nur für das erste iframe-Element festgelegt ist, kann auch nur der Inhalt des ersten iframe-Elements im Vollbildmodus angezeigt werden. Für den Inhalt des zweiten iframe-Elements wird beim Klicken die Originalgröße beibehalten und ein MSFullscreenError-Ereignis ausgelöst.


<!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>


Dieses Beispiel zeigt die Testdatei "iframeTest.html" für die einzelnen iframe-Elemente aus dem vorherigen Beispiel.


<!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>


Ermitteln, ob der Vollbildmodus zur Verfügung steht

Mit der msFullscreenEnabled-Eigenschaft wird zurückgegeben, ob für ein Dokument der Vollbildmodus möglich ist. Die hauptsächliche Verwendung besteht darin zu überprüfen, ob für das contentDocument-Element eines iframe-Elements das allowfullscreen-Attribut festgelegt ist. Wenn ein contentDocument-Element eines iframe-Elements über das allowfullscreen-Attribut verfügt, wird msFullscreenEnabled zurückgegeben. Andernfalls wird "false" zurückgegeben. msFullscreenEnabled sollte im Allgemeinen nicht zur Erkennung des Vollbildfeatures verwendet werden.


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


Erkennen von Änderungen beim Vollbildmodus

Das MSFullscreenChange-Ereignis erkennt, wenn Elemente in den Vollbildmodus wechseln oder diesen verlassen. Das folgende Beispiel gibt in der Konsole eine Meldung aus, wenn ein Element in den Vollbildmodus wechselt oder diesen verlässt.


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


Das MSFullscreenChange-Ereignis wird ausgelöst, nachdem ein Element in den Vollbildmodus gewechselt oder diesen verlassen hat. Dadurch können Sie den aktuellen Zustand abrufen. Im Beispiel wird durch die Überprüfung der msFullscreenElement-Eigenschaft ermittelt, ob sich Elemente im Vollbildmodus befinden. Wenn sich ein Element im Vollbildmodus befindet, wird das Element zurückgegeben. Andernfalls wird von msFullscreenElementnull zurückgegeben.

Hinweis  Drücken Sie während der Demoausführung die F12-TASTE, um die F12-Entwicklertools zu öffnen und die Ausgabe des Beispiels anzuzeigen. Öffnen Sie die Registerkarte Konsole, um die Meldungen anzuzeigen. Wenn das Beispiel in den Vollbildmodus wechselt, erscheint "Went full screen" (Vollbildmodus gestartet). Beim Verlassen des Vollbildmodus erscheint "Exited full screen" (Vollbildmodus beendet).

Erfassen von Fehlern für den Vollbildmodus

Der Vollbildmodus besitzt ein eigenes Fehlerereignis: MSFullscreenError. Dieses Ereignis wird ausgelöst, wenn der Vollbildmodus angefordert wird, die Anforderung aber nicht erfüllt werden kann. Dieser Codeausschnitt zeigt einen einfachen Ereignishandler für MSFullscreenError.


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


Verwenden von CSS-Pseudoelementen für das Vollbilddesign

Mithilfe der :-ms-fullscreen-Pseudoklasse und des ::-ms-backdrop-Pseudoelements von CSS können Sie das Seitenelementdesign abhängig vom Vollbildmodus gestalten. Mit :-ms-fullscreen können Sie das Darstellungsdesign eines Elements im Vollbildmodus ändern. Bei den meisten Elementen (wie etwa bei einem <div>-Element) können üblicherweise Aspekte wie position, color oder size geändert werden.

Die Größe der Elemente bleibt im Vollbildmodus unverändert, und die Elemente sind von einem schwarzen Hintergrund umgeben. Einzige Ausnahme: das Videoelement. Der Hintergrund kann mithilfe des ::-ms-backdrop-Pseudoelements geändert werden. Hierbei kann es sich um ein Bild, eine andere Farbe oder um einen Rand handeln. Auf Hintergründe für ein Videoelement im Letterbox- oder Pillarboxformat hat ::-ms-backdrop keine Auswirkungen.

Dieses Beispiel kann nur in IE11 ausgeführt werden und enthält keinen browserübergreifenden Code. Zunächst wird ein blaues Feld angezeigt. Durch Klicken auf das Feld wird es in den Vollbildmodus versetzt. Das Feld wird in vertikaler und horizontaler Richtung jeweils um 200 Pixel verschoben, und die Farbe wechselt zu grün. Hierzu wird mithilfe der :-ms-fullscreen-Pseudoklasse der Vollbildmodus erkannt, und es werden neue Designs angewendet. Die Farbe des Hintergrunds um das Feld wechselt zu Magenta. Hierzu wird das ::-ms-backdrop-Pseudoelement verwendet.


<!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>


Die Darstellung eines Elements im Vollbildmodus ist browserabhängig. In anderen Browsern wird das Element ggf. bildschirmfüllend angezeigt, und das Pseudoelement für den Hintergrund wird unter Umständen nicht unterstützt.

Mit :-ms-fullscreen können Sie das Verhalten ändern, sodass das Element bildschirmfüllend angezeigt wird und der schwarze Hintergrund verschwindet. Wenn das Element in den Vollbildmodus wechselt, können Sie die CSS-Eigenschaften für Höhe und Breite auf 100 Prozent festlegen, um das Element an das Fenster anzupassen. Dieses Beispiel erweitert ein kleines Feld, sodass es bildschirmfüllend angezeigt wird. Außerdem enthält es ein Webkit-Pendant von :-ms-fullscreen .


<!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-Referenz

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

Spezifikation

Vollbild

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.