Wie lässt sich möglichst unkompliziert eine Vollbildfunktion für Websites erstellen?

1 Antwort

Das geht mit Element.requestFullscreen(). Normalerweise bezieht sich das auf ein Element, z.B. ein Video: document.getElementById("deinVideo").requestFullscreen().

Um die ganze Seite im Vollbild zu öffnen benutze: document.documentElement.requestFullscreen().

Hier als Button:

<button onclick="document.documentElement.requestFullscreen()">Fullscreen</button>
Woher ich das weiß:Hobby – Erfahrener Programmierer und Informatik-Student

Ich probiere es gleich mal!

0
@JFhatFragen

Danke! Es funktioniert! Lässt es sich auch ermöglichen, dass bei wiederholtem drücken auf den Knopf der Vollbildmodus wieder beendet wird?

0
@JFhatFragen

Versuch's mal hiermit:

<button onclick='if(window.innerHeight != screen.height) document.documentElement.requestFullscreen(); else document.exitFullscreen();'>Fullscreen</button>

Erklärung:

window.innerHeight != screen.height überprüft, ob man noch nicht im Vollbild ist.

document.documentElement.requestFullscreen(); macht Vollbild.

document.exitFullscreen(); beendet Vollbild.

0
@MrAmazing2

Das klappt leider nicht. Damit lässt sich der Vollbild modus immernoch starten aber nicht beenden. Danke trotzdem!

0
@MrAmazing2

Aber es kann sein, dass das in Safari (Browser von Apple-Geräten) und auf alten Browser-Versionen nicht funktioniert.

Also benutzt am besten lieber folgends:

<button onclick='toggleFullScreen()'>Fullscreen</button>

<script>
function toggleFullScreen() {
 if ((document.fullScreenElement && document.fullScreenElement !== null) ||  
 (!document.mozFullScreen && !document.webkitIsFullScreen)) {
  if (document.documentElement.requestFullscreen) { 
    document.documentElement.requestFullscreen(); 
  } else if (document.documentElement.mozRequestFullScreen) { 
    document.documentElement.mozRequestFullScreen(); 
  } else if (document.documentElement.webkitRequestFullScreen) { 
    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
  } 
 } else { 
  if (document.cancelFullscreen) { 
    document.cancelFullscreen(); 
  } else if (document.mozCancelFullScreen) { 
    document.mozCancelFullScreen(); 
  } else if (document.webkitCancelFullScreen) { 
    document.webkitCancelFullScreen(); 
  } 
 } 
}
</script>
0
@JFhatFragen

Ich hab's auf Mozilla getestet, vlt. benutzt du Safari oder so?

Siehe mal meine neuste Antwort, das sollte überall funktioniern.

0

Was möchtest Du wissen?