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:
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');
});
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.
// 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');
});
Beispiel
Im folgenden Beispiel habe ich alle Code-Snippets eingebaut
Hinterlasse einen Kommentar
Auf der eigenen Website geantwortet? Sende eine Webmention!