JavaScript/Fullscreen

Aus SELFHTML-Wiki
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 Vollbild-Effekt auch bei normalen Webseiten erzielen. Die Taskleisten des Browsers und des Betriebssystems werden ausgeblendet, sodass nur die Webseite im Vollbildmodus sichtbar ist.

Ob eine Webseite im Vollbildmodus oder in klassischer Ansicht mit Browserzeile dargestellt wird, sollte der Nutzer entscheiden. Deshalb werden Nutzer beim Aktivieren der Vollbildansicht mit einer Systemmeldung gewarnt und über das mögliche Verlassen des Vollbildmodus mit ESC aufgeklärt.

Beachten Sie:
Parallel zur Fullscreen API können Sie Webseiten auch mit der Funktionstaste F11 in den Vollbildmodus ein- und wieder ausschalten. Dieser F11-Modus ist betriebssystem-, bzw. browserbasiert und kann nicht mit der Fullscreen API verändert und auch nicht mit :fullscreen gestylt werden.[1]
Die Fullscreen API ist dagegen eher für die Vollbildansicht von Bildern, Videos und Spielen innerhalb eines Containers gedacht.

Browsersupport

Da im Augenblick nur Chrome, Edge und Firefox-Browser die FullScreen-API ohne vendor-prefix unterstützen, müssen Sie eine Fallunterscheidung einbauen:

Details: caniuse.com

Vollbildmodus starten 
function enterFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.msRequestFullscreen) {      // for IE11 (remove June 15, 2022)
    element.msRequestFullscreen();
  } else if(element.webkitRequestFullscreen) {  // iOS Safari
    element.webkitRequestFullscreen();
  }
}

enterFullscreen(document.documentElement);               // ganze Seite
enterFullscreen(document.getElementById("videoPlayer")); // ein bestimmtes Element
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 schrieb: mozFullScreenEnabled, bzw mozFullScreenElement. (Seit FF64 verwendet Mozilla die Standard-Syntax.
Trotzdem gibt es gerade bei Safari mit der alten Syntax noch Probleme.

Verlassen des Vollbildmodus

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

Vollbildmodus verlassen 
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } 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() gab es im Firefox bis Version 63 mozCancelFullScreen().

Anwendungsbeispiel

Bild mit Lightbox-Effekt

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

Achtung!

Um dieses Beispiel zu untersuchen, öffnen Sie bitte …
  1. das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
  2. den Seiteninspektor mit F12!
HTML: figure mit Bild und Button ansehen …
<p>
  Mit einem Klick auf das Bild öffnen Sie es im Vollbildmodus.<br>
  Mit <kbd>ESC</kbd> kehren Sie zur klassischen Ansicht zurück.
</p>
<figure id="stage">
  <img src="https://wiki.selfhtml.org/images/a/ab/Peru-3.jpg" alt="Peru 2007: Machu Picchu">
  <button>Vollbildmodus ⛶</button>
</figure>
Da es bei Touchgeräten keine Tasten gibt und man deshalb nicht so aus dem Vollbild-Modus herauskommt, wurde die Seite noch um einen Button ergänzt.


Schalten in den Fullscreen-Modus ansehen …
	const stage  = document.querySelector('#stage'),
	      toggleButton = document.querySelector('#stage button');			
	stage.addEventListener('click', toggler);

	function toggler(event) { 
		console.log("toggler",window.matchMedia('(display-mode: fullscreen)').matches);
		if (window.matchMedia('(display-mode: fullscreen)').matches) {
			console.log('exit');
    	exitFullscreen();  
		} else { 
			console.log('enter');
    	enterFullscreen(stage); 
 		}
	}
	
	stage.addEventListener("fullscreenchange", updateButton);
	
	function updateButton(event) {
		console.log("fullscreenchange");
		toggleButton.classList.toggle('fullscreen');
		toggleButton.textContent = (toggleButton.textContent == 'Vollbildmodus ⛶') ? 'Vollbildmodus verlassen X' : 'Vollbildmodus ⛶';
	}


function enterFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {       // for IE11 (remove June 15, 2022)
    element.msRequestFullscreen();
  }
}

function exitFullscreen() { console.log('exit');
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

Das figure-Element erhält mit addEventListener einen Event-Handler, der bei einem Klick die Funktion toggler() aufruft:

Die Funktion überprüft mit matchMedia().matches , ob der display-mode im Fullscreen-Modus ist. Falls dies zutrifft, wird die oben besprochene Funktion exitFullscreen() , falls nicht enterFullscreen() aufgerufen. Anschließend wird der Button über eine Klasse fullscreen absolut oben rechts positioniert.

Fullscreen-Screenshot.png

Beachten Sie: Mit einem Klick auf F11 öffnen Sie die gesamte Seite im Vollbildmodus.

Mit einem weiteren Klick kehren Sie zur klassischen Ansicht zurück.

Bei einem Klick auf Bild oder Button blenden die Browser eine Sicherheitswarnung ein, damit der Benutzer wieder in die gewohnte Ansicht zurückkehren kann. Diese verschwindet jedoch nach wenigen Sekunden.

Um dem Benutzer trotzdem volle Kontrolle zu geben, wurde der zusätzliche Button hinzugefügt.

Dieses Beispiel wurde ursprünglich im Januar 2017 veröffentlicht. Damals unterstützten noch nicht alle Browser den Vollbildmodus eines Elements. Deshalb wurde als zweites Beispiel der Vollbildmodus des gesamten Dokuments und die Formatierung des zu vergößernden Elements mit :fullscreen vorgestellt.

CSS: Gestaltung mit :fullscreen

Da ein Vollbild-Modus der gesamten Seite in allen Browsern funktioniert, wird in diesem Beispiel die gesamte Seite vergrößert und dann das Bild mit CSS auf die volle Größe skaliert.

Sie können über die Pseudoklasse :fullscreen auch abweichende Gestaltungsregeln für den Vollbildmodus festlegen. Hierbei müssen aber auch vendor-prefixes verwendet werden. [2]

Details: caniuse.com

Gestaltung mit CSS 
:-ms-fullscreen body {           /*  for IE11 (remove June 15, 2022)   */
  font-size: 2em;
}
:-webkit-full-screen body {     /* iOS Safari  */
  font-size: 2em;
}
:fullscreen body {
  font-size: 2em;
}
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.
Die Schreibweise unterscheidet sich nicht nur durch die vendor-prefixes, sondern auch durch den Bindestrich zwischen full und screen bei den Webkit-Browsern (Safari).

Achtung!

Um dieses Beispiel zu untersuchen, öffnen Sie bitte …
  1. das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
  2. den Seiteninspektor mit F12!
Formatierung mit :fullscreen-Pseudoklasse ansehen …
  function toggleFullScreen() {
		var element = document.getElementById("stage");
    if (!document.Fullscreen && !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.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 ansehen …
:-ms-fullscreen 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;
}

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

figure { 
 width: 33%;
 float: right;
 margin-right: 2em;
}

figure img {
  width: 100%;
}

Auch wenn die gesamte Seite im Vollbildmodus 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.

Hintergrund mit ::backdrop

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.

Hintergrund mit ::backdrop-Pseudoklasse ansehen …
:fullscreen img {
  position: fixed;
  width: 70%;
  height: 70%;
  top: 15%; 
  left:15%;
  object-fit: contain;
  background: none;
}
      
:-webkit-full-screen::-webkit-backdrop { /* iOS Safari  */
  background-color: palegreen;
}
:fullscreen::backdrop {
  background-color: pink;
}

In diesem Beispiel wird das Bild auf 70% der Größe begrenzt. Der Rand um das Bild, bzw. der Hintergrund wird über :fullscreen::backdrop bzw. den entsprechenden vendor-prefix für iOS Safari farbig eingefärbt. (Das pink soll nur die Funktion demonstrieren; ändern Sie die Farbe im Frickl!)

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

  1. ↑ SELF-Forum: Elemente im browserseitigen Fullscreen (F11) ausblenden
  2. ↑ MDN: :fullscreen
Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Fullscreen&oldid=97578“