201224Jul

Screenfull.js: JavaScript-Wrapper für Fullscreen-API

Mit der noch experimentellen Fullscreen-API lässt sich eine Website oder ein beliebiges DOM-Element in den Vollbildmodus versetzen, der die Benutzeroberfläche des Browsers sowie andere Anwendungen ausblendet und das entsprechende Element maximiert. Die JavaScipt-API steht derzeit in Firefox, Chrome und Safari zur Verfügung, während die Unterstützung in Opera und Internet Explorer noch offen ist. Leider gibt es durch die verschiedenen Rendering-Engines (Gecko, Webkit) auch Unterschiede bei der Implementierung, die sich durch die Präfixe "moz" und "webkit" auszeichnen. Hier kommt der JavaScript-Wrapper Screenfull.js zum Einsatz, der die Browser-Erkennung übernimmt und die API-Funktionen abrufbar macht.

Screenfull.js - JavaScript-Wrapper für Fullscreen-API

So kann mit der Methode "request()" die ganze Seite oder ein bestimmtes DOM-Element in den Vollbildmodus gebracht werden. Eine einfache Implementierung könnte so aussehen:

  • var elem = document.getElementById('#target');
  • document.getElementById('#button').addEventListener('click', function() {
  • screenfull.request(elem);
  • });

Weiterhin kann mit der Methode "onchange()" festgestellt werden, ob der Vollbildmodus verlassen wurde. Mehr Informationen gibt es wieder bei GitHub.