Dies ist nur eine Spielwiese.
Das echte SELFHTML-Wiki gibt es unter https://wiki.selfhtml.org.

JavaScript/Fullscreen

SELFHTML e.V.
Wechseln zu: Navigation, Suche

Native Apps nehmen in der Regel die ganze Höhe und Breite des Viewports ein. Mit der Fullscreen API können Sie diesen Effekt auch bei normalen Webseite erzielen. Die Taskleisten des Browsers und des Betriebssystems werden ausgeblendet, sodass nur die Webseite im Vollbildmodus sichtbar ist.

Details: caniuse.com

Sie können Webseiten auch mit dem Drücken der Funktionstaste F11 in den Vollbildmodus ein-und ausschalten. Die Fullscreen API ist dagegen eher für die Vollbildansicht von Bildern, Videos und Spielen innerhalb eines Containers gedacht.

Da die Entscheidung, ob eine Webseite im Vollbildmodus oder in klassischer Ansicht mit Browserzeile dargestellt wird, eher dem Nutzer überlassen werden sollte; werden Nutzer beim Aktivieren der Vollbildansicht mit einer Systemmeldung gewarnt und über das Verlassen des Vollbildmodus mit ESC aufgeklärt.

Browsersupport

Da im Augenblick nur der Edge-Browser die FullScreen-API ohne vendor-prefix unterstützt, müssen Sie eine Fallunterscheidung einbauen:

Beispiel: Vollbildmodus starten 
function enterFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

enterFullscreen(document.documentElement);               // ganze Seite
enterFullscreen(document.getElementById("videoPlayer")); // ein bestimmtes Element

Verlassen des Vollbildmodus

Sie können den Vollbildmodus bequem per Tastendruck mit ESC oder auch F11 verlassen oder die Methode exitFullscreen() aufrufen.

Beispiel: Vollbildmodus verlassen 
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

exitFullscreen();
Beim Verlassen des Vollbildmodus müssen Sie nicht zwischen ganzer Seite, bzw. einzelnem Element unterscheiden.
Beachten Sie: für die Methode exitFullscreen() gibt es im Firefox mozCancelFullScreen().

Schreibweisen

Beachten Sie: Die einzelnen Methoden und Eigenschaften unterscheiden sich nicht nur durch die vendor-prefixes, sondern oft auch durch abweichende Schreibweisen: Chrome verwendet webkitFullscreenEnabled und webkitFullscreenElement, während Firefox dies mit großem S schreibt: mozFullScreenEnabled, bzw mozFullScreenElement.


Gestaltung mit CSS

Sie können über die Pseudoklasse :fullscreen auch abweichende Gestaltungsregeln festlegen. Hierbei müssen aber auch vendor-prefixes verwendet werden.

Beispiel: Gestaltung mit CSS 
:fullscreen body, 
:-ms-fullscreen body,
:-moz-full-screen body, 
:-webkit-fullscreen body {
  font-size:: 1.5em;
Beachten Sie: Die Schreibweise unterscheidet sich nicht nur durch die vendor-prefixes, sondern auch durch den Bindestrich zwischen full und screen bei den Gecko- und Webkit-Browsern.

Siehe auch:

Des Weiteren kann gerade bei der Anzeige von Bildern und Videos ein Hintergrund mit der Pseudoklasse ::backdrop festgelegt werden. Mit object-fit können Sie die Größe der Bilder bestimmen.

Beispiel: Gestaltung mit CSS 
:fullscreen ::backdrop, 
:-ms-fullscreen::-ms-backdrop ,
:-moz-full-screen::-moz-backdrop, 
:-webkit-fullscreen::-webkit-backdrop {
  background-color: #666;

Anwendungsbeispiel

Bild mit Lightbox-Effekt

In einem ersten Anwendungsbeispiel soll ein Bild in Vollbild-Großansicht dargestellt werden.

Beispiel So sieht's ausQuellcode
<p>
  Mit einem Klick auf das Bild öffnen Sie es im Vollbildmodus.<br>
  Mit <kbd>ESC</kbd> oder <kbd>F11</kbd> kehren Sie zur klassischen Ansicht zurück.

  <button id="on">Vollbildmodus</button>
  <button id="exit">zurück zur klassischen Ansicht</button>
</p>
<p>
  <img src="Peru-3.jpg" alt="Peru 2007: Machu Picchu">
</p>
Da es bei Touchgeräten keine Tasten gibt und man deshalb nicht so aus dem Vollbild-Modus herauskommt, wurde die Seite noch um zwei Buttons ergänzt.


Beispiel So sieht's ausQuellcode
  function init () {
      var image = document.querySelector('img');
      image.addEventListener('click',function () { enterFullscreen(image); }
	);
      var buttonOn = document.querySelector('#on');
      buttonOn.addEventListener('click',function () { enterFullscreen(document.documentElement); }
	); 
      var buttonExit = document.querySelector('#exit');
      buttonExit.addEventListener('click',exitFullscreen);	  	  
}	

function enterFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
Sowohl der Button mit der id="on" als auch das Bild erhalten mit addEventListener einen Event-Handler, der bei einem Klick die oben besprochene Funktion enterFullscreen() aufruft. Bei einem Klick auf den Exit-Button wird die Funktion exitFullscreen() aufgerufen.
Beachten Sie: Das Beispiel funktioniert im Firefox und IE11 wie gewünscht: Bei einem Klick auf den Button wird die gesamte Seite, bei einem Klick auf das Bild nur das Bild im Vollbildmodus angezeigt.

In Chrome und Safari wird bei einem Klick auf das Bild zwar der Vollbildmodus angezeigt, das Bild aber nicht dargestellt.

Im IE11 wird das Bild zwar dargestellt, behält trotz Versuchen mit :-ms-fullscreen {} aber seine vorher eingestellte Breite von 33%, was zu einer verzerrten Darstellung am linken Seitenrand führt. Auch der Vollbildmodus der gesamten Seite ist in diesem (sowie anderen) Beispielen nicht zentriert.

Toggle-Modus

Da der Vollbild-Modus der gesamten Seite in allen Browsern funktioniert, wird in diesem Beispiel die gesamte Seite vergrößert, dann das Bild mit CSS auf die gewünschte Größe vergrößert:

Beispiel So sieht's ausQuellcode
  function init () {
  document.addEventListener("click", toggleFullScreen, false);  
}	
    
  function toggleFullScreen() {
    var element = document.getElementById("bild");
    if (!document.Fullscreen && !document.mozFullScreen && !document.webkitFullScreen && !document.msRequestFullscreen) {
      if(element.requestFullScreen) {
        element.requestFullScreen();
      } else if(element.webkitRequestFullScreen ) {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();	
     }
    } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
In der Funktion toggleFullScreen() wird mit !document.Fullscreen (und den jeweiligen Versionen mit Browserpräfix) abgefragt, ob sich der Bildschirm nicht im Vollbildmodus befindet. wenn dies zutrifft, wird mit element.requestFullScreen der Vollbildmodus ein- sonst mit exitFullscreen (im Firefox: mozCancelFullScreen) wieder ausgeschaltet.
Beachten Sie: In den webkit-Browsern Chrome und Opera funktioniert das Verlassen nur über die Tasten, bzw über den browserinternen Button.

Die Vergrößerung des Bilds wird nun mit CSS erreicht:

Beispiel So sieht's ausQuellcode
figure { 
 width: 33%;
 float: right;
 margin-right: 2em;
}

figure img {
  width: 100%;
}

:-fullscreen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

:-ms-fullscreen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

:-moz-full-screen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

:-webkit-full-screen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}
Auch wenn die gesamte Seite im Vollbildmoduus angezeigt wird, ist nur das Bild mit seinen sich über den gesamten Viewport erstreckenden Maßen sichtbar. Mit object-fit können in allen Browsern außer dem IE Beschneidungen verhindert werden.
Beachten Sie: Eine Kombination der verschiedenen Selektoren mit Kommata, da die Regelsätze ja identisch sind, ist nicht möglich. Die Browser ignorieren sonst die Festlegungen.

Kiosksystem

In einem Kiosksystem laufen Anwendungen, die Nutzern in einem geschlossenen Kiosk-Modus Informationen wie Wegweiser oder eine interne Suchfunktion zur Verfügung stellen. Da hier die verwendeten URLs sowie die Taskleiste des Betriebssystems für den Benutzer nicht wichtig sind, werden sie oft im Vollbildmodus dargestellt.

Für Interessierte, die von zu Haus aus die Seiten besuchen, werden die Inhalte in klassischer Ansicht präsentiert.

Weblinks

Abgerufen am 9.12.2025
von "http://wiki-test.selfhtml.org/wiki/JavaScript/Fullscreen"