Vollbildmodus beenden

Habe ich den folgenden javascript-Code wird ausgelöst durch einen button in meinem HTML:

function toggleFullScreen(){

    if(v.requestFullScreen){
        v.requestFullScreen();
    }
    else if(v.webkitRequestFullScreen){
        v.webkitRequestFullScreen();
    }
    else if(v.mozRequestFullScreen){
        v.mozRequestFullScreen();
    }
}

Wie verlängere ich diese JS-code zu integrieren, die Fähigkeit zu exit fullscreen? Was sind die best practices für diese?

InformationsquelleAutor cwiggo | 2014-01-22
  1. 15

    Es ist tatsächlich ein voll funktionsfähiges Beispiel auf MDN:
    https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode

    Zitat:

    Umschalten Vollbild-Modus

    Dieser code wird aufgerufen, wenn der Benutzer trifft die Enter-Taste, wie oben zu sehen.

    function toggleFullScreen() {
  if (!document.fullscreenElement &&    //alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  //current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

    Dieser beginnt mit der Suche am Wert der fullscreenElement Attribut
    auf das Dokument (Prüfung vorangestellt beide moz, ms, und webkit).
    Wenn es null ist, wird das Dokument ist derzeit im Fenstermodus, so müssen wir
    um in den Vollbild Modus wechseln. Umschaltung auf Vollbild-Modus erfolgt durch
    Aufruf entweder element.mozRequestFullScreen() msRequestFullscreen()oder
    webkitRequestFullscreen(), je nachdem, welche verfügbar ist.

    Wenn der Vollbildschirm-Modus ist bereits aktiv (fullscreenElement ist nicht null),
    wir nennen Dokument.mozCancelFullScreen(), msExitFullscreen oder
    webkitExitFullscreen(), wieder abhängig davon, welchen browser Sie benutzen.

    • nur um das zu posten code, brillante Ressource, vielen Dank, dass Sie so prompt! akzeptiert, in 2 Minuten, Ruf++ 🙂
    InformationsquelleAutor gpgekko
  2. 3

    Haben Sie versuchen, etwas von dieser ?

    exitFullscreen();
mozCancelFullScreen();
webkitExitFullscreen();
msExitFullscreen();

    Schau da :

    https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

    oder:

    http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html

    Ist dies genug für Sie hilfreich ?

    • Wie kann ich adapat diese Funktionen zu meinem code? Ich habe versucht, für die letzten Stunden 🙂
    • Danke für die prompte Antwort, ich habe abgerufen, die benötigten Funktionen!
    • Kein problem 🙂 Können Sie markieren, meine Antwort mit dicken ? Vielen Dank
    • Die andere Antwort den code habe ich von Ihnen positiv bewertet werden Sie sowieso!
    • Code von der website, was ich dir geschickt habe 😀 Das war Diebstahl 😀
    InformationsquelleAutor Makromat
  3. 1
    1. Holen Sie sich jQuery von: http://jquery.com/download/
    2. Bekommen screenfull.min.js aus:
      https://github.com/sindresorhus/screenfull.js/
    3. In <head>...</head>
    4. Eine id zuweisen <body> ex. mainBody

    5. Legen Sie die Funktion vor dem schließenden body-tag, dh. </body>

      <script src="js/jquery.js"></script> 
<script src="js/screenfull.min.js"></script> 
</head>

<body id="mainBody">
<!--[whatever]-->
<script>
             $(function tScreen()
             {
              if(!screenfull.enabled) 
              { return false; }
              screenfull.request(document.getElementById('mainBody'));
             });

             $('#toggle').click(function () 
             { screenfull.toggle($('#mainBody')[0]);});
       </script>
</body>
</html>
    InformationsquelleAutor zer00ne
Schreibe einen Kommentar