Browser Fullscreen APIs

Veröffentlicht von am

Obwohl ich ab und and die Browser-Fullscreen-APIs in einigen meiner Projekte verwendet habe, waren mir einige Details noch nicht bekannt.

Deshalb habe ich im Folgenden einige nützliche Code-Schnipsel zusammengestellt.

Geprefixte Methoden und Objekte

Laut caniuse ist die Vollbild-Schnittstelle in Safari noch geprefixed. Hier muss jeweils im Methodennamen noch webkit vornangestellt werden; so muss man beispielsweise in Safari: element.webkitRequestFullscreen() statt element.requestFullscreen() aufrufen.

Ich verwende folgende Hilfsfunkiton, um in jedem Browser die richtige Methode aufzurufen, bzw. auf das richtige Objekt zuzugreifen:

function getPrefixedElementMethod(el, methodName) {
	const prefixedMethodName = getPrefixedName(el, methodName);
	return prefixedMethodName && typeof el[prefixedMethodName] === 'function'
		? (...args) => el[prefixedMethodName](...args)
		: undefined;
}

function getPrefixedChild(parent, childName) {
	const prefixedChildName = getPrefixedName(parent, childName);
	return prefixedChildName ? parent[prefixedChildName] : undefined;
}

function getPrefixedName(parent, childName) {
	const prefixes = ['webkit', 'moz', 'ms'];

	const prefixedChildName = prefixes.reduce((result, prefix) => {
		if (typeof parent[childName] !== 'undefined') {
			return childName;
		} else {
			const prefixedChildName = `${prefix}${capitalizeFirstLetter(
				childName
			)}`;

			if (typeof parent[prefixedChildName] !== 'undefined') {
				return prefixedChildName;
			}
		}

		return result;
	}, null);

	return prefixedChildName;
}

function capitalizeFirstLetter(str) {
	return str.charAt(0).toUpperCase() + str.slice(1);
}

Element im Vollbildmodus öffnen

Mit der Methode requestFullscreen() kann man ein Element im Vollbildmodus öffnen.

Die Methode hat einen optionalen options-Parameter, mit dem man einstellen kann ob Navigationselemente des Browsers angezeigt werden oder nicht (Ausnahmen: Firefox und Safari).

Die Methode gibt ein Promise zurück, so dass man auf die Umschaltung in den Vollbildmodus reagieren kann, um z.B. nach der Vollbild-Umschaltung Code auszuführen (Ausnahme: Safari).

const element = document.querySelector('#my-fullscreen-element');

// default
element.requestFullscreen();

// hide browser navigation UI
element.requestFullscreen({ navigationUI: 'hide' });

// show browser navigation UI
element.requestFullscreen({ navigationUI: 'show' });

// requestFullscreen returns a promise
element.requestFullscreen().then(() => {
	console.log('you are now in fullscreen mode');
});

// cross-browser method
const requestFullScreen = getPrefixedElementMethod(
	element,
	'requestFullScreen'
);
requestFullScreen();
requestFullScreen({ navigationUI: 'hide' }).then(() => {
	console.log('opened fullscreen');
});

Vollbildmodus schließen

Die Methode document.exitFullscreen() schließt den Vollbildmodus. Wichtig hier: exitFullscreen ist eine Methode des document-Objekts, nicht des element Objekts.

Auch document.exitFullscreen() gibt ein Promise zurück (Ausnahme: Safari).

// default
document.exitFullscreen();

// exitPromise returns a Promise
document.exitFullscreen().then(() => {
	console.log('full screen was closed');
});

// cross-browser method
const exitFullScreen = getPrefixedElementMethod(document, 'exitFullScreen');
exitFullScreen();
exitFullScreen().then(() => {
	console.log('closed fullscreen');
});

Vollbildmodus erkennen

Das Objekt document.fullscreenElement enthält eine Referenz auf das Element, das im Vollbildmodus geöffnet wurde. In Safari ist dieses Objekt geprefixed: document.webkitFullscreenElement (Ausnahme Safari auf dem iPhone: hier existiert das Objekt nicht)

// detect fullscreen
if (document.fullscreenElement) {
	console.log('hello fullscreen.');
}

// cross-browser (except Safari Iphone)
if (getPrefixedChild(document, 'fullscreenElement')) {
	console.log('hello fullscreen.');
}

Events

Beim Öffnen oder Schließen des Vollbildmodus, wird jeweils das fullscreenchange-Event ausgelöst. In Safari ist der Event-Name mit einem Prefix versehen und heißt webkitfullscreenchange.

function fullscreenChanged() {
	console.log('fullscreen was either opened or closed.');
}

document.addEventListener('fullscreenchange', fullscreenChanged);

Beispiel

Im folgenden Beispiel habe ich alle Code-Snippets eingebaut

Hinterlasse einen Kommentar

Verfügbare Formatierungen

Benutze Markdown-Befehle oder ihre HTML-Äquivalente, um deinen Kommentar zu formatieren:

Textauszeichnungen
*kursiv*, **fett**, ~~durchgestrichen~~, `Code` und <mark>markierter Text</mark>.
Listen
- Listenpunkt 1
- Listenpunkt 1
1. Nummerierte Liste 1
2. Nummerierte Liste 2
Zitate
> Zitierter Text
Code-Blöcke
```
// Ein einfacher Code-Block
```
```php
// Etwas PHP-Code
phpinfo();
```
Verlinkungen
[Link-Text](https://example.com)
Vollständige URLs werden automatisch in Links umgewandelt.

Auf der eigenen Website geantwortet? Sende eine Webmention!