j4nk3y: Javascript toggleFullscreen

Beitrag lesen

SELF-Forum

Javascript toggleFullscreen

j4nk3y
– Informationen zu den Bewertungsregeln

Salve!

vor ein paar Wochen habe ich nach einer Möglichkeit gesucht, dem Client die Möglichkeit zu geben das Browserfenster im Vollbildmodus darzustellen. Nach ein wenig Recherche kam dann folgende Funktion dabei heraus:

function toggleFullScreen(elem) {
	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) ||
	(document.msFullscreenElement !== undefined && document.msFullscreenElement === null) ||
	(document.mozFullScreen !== undefined && !document.mozFullScreen) ||
	(document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
		if (elem.requestFullScreen) {
			elem.requestFullScreen();
		} else if (elem.mozRequestFullScreen) {
			elem.mozRequestFullScreen();
		} else if (elem.webkitRequestFullScreen) {
			elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
		} else if (elem.msRequestFullscreen) {
			elem.msRequestFullscreen();
		}
	} else {
		if (document.cancelFullScreen) {
			document.cancelFullScreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}
}

Diese konnte/habe ich dann, über einen Button Click, eine ganze Zeit wie folgt aufgerufen:

toggleFullScreen(document.body);

Funktionierte erstmal aber es traten noch kleinere Probleme auf. Zum Beispiel erstens: Hintergrundfarbe des HTML änderte sich auf Weiß.

Gestern habe ich mich dann der Problematik angenommen. Erstes konnte ich dann simpel mit CSS (html:fullscreen), und den entsprechenden für die anderen Browser, beheben. Wie das so ist, trat gleich das nächste Problem auf. Das <canvas>-Element welches den <body> vollständig ausfüllt und dessen Inhalt per Mausevent steuerbar ist, war im Vollbildmodus nicht mehr steuerbar. Dann dachte ich, ich bin auf die glorreiche Idee gekommen, einfach das zu togglende Element zu verändern, also kurzerhand das "größte"/"umfassendste" Element gesetzt welches ich kenne:

toggleFullScreen(document);

Ausprobiert: Funktioniert... Hurray!

Dann die Ernüchterung, es funktionierte genau einmal. Danach funktioniert es gar nicht mehr, egal welches Element ich der Funktion übergebe und ich habe ehrlich gesagt keinen blassen Dunst warum!?

Und um es schon mal vorweg zu nehmen: Nein ich bekomme keine Fehlermeldung in der Console und nein der Debugger sagt auch nichts.

Noch ein kleiner Nachtrag. Ich habe gerad noch einmal ein wenig probiert und hab die Timeline vom Debugger geöffnet und das Element nochmal zu document.body geändert. Plötzlich ging es wieder, mit dem Problem, dass sich die Hintergrundfarbe geändert hat, da habe ich aber schon eine Idee. Danach dann wieder auf document gewechselt und siehe da, es funktioniert wieder gar nicht, auch nicht nach dem erneuten wechsel zu document.body.

Hat irgendjemand eine die Erleuchtung für mich?

Gruß
Jo

Beitrag melden
–
Informationen zu den Bewertungsregeln