Ben's Hobbyhoekje -- Webpagina omschakelen in full-screen modus

Webpagina omschakelen in full-screen modus

Als je op de knop hiernaast klikt, schakelt het browserwindow over naar Full-screen mode. Dat betekent dat de pagina het hele scherm vult. Zelfs de randen verdwijnen.

Als je weer op de knop klikt, schakelt het window weer terug.

Op deze pagina wordt uitgelegd hoe je dit aanpakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Alleen de werking van het script wordt besproken. Toepassing in je eigen site ligt voor de hand.

De werking van het script
Deze aanpak gebruikt de nogal onbekende Full Screen API (Application Programming Interface). Vandaar dat je de hier gebruikte techniek nauwelijks wordt beschreven in boeken en internet.
Het gegeven dat de code nog steeds browser-afhankelijkheden heeft, duidt er op dat de ondersteuning niet breed is.
De code bestaat uit JavaScript en wat HTML voor de knop.
Als er op de knop wordt geklikt, wordt de function toggleFullscreenMode() gestart. Deze function kijkt eerst of het document al in full-screen mode staat. Dat wordt bijgehouden in de variabele isInFullScreen. Deze kent twee waarden: true (het document staat in full-screen mode) of undefined. Dit lijkt vreemd, maar JavaScript interpreteert dit als false.
Afhankelijk van de waarde van isInFullScreen wordt de full-screen mode ingeschakeld of juist uitgeschakeld.
Om het document in full-screen mode te zetten wordt de methode document.documentElement.requestFullscreen() ingezet, met Vendor-prefix varianten voor Webkit en Mozilla.
Om het document uit full-screen mode te halen wordt de methode document.exitFullscreen() ingezet, met Vendor-prefix varianten voor Webkit en Mozilla. Let bij Mozilla op de spelling.
De foutmelding voor als het niet werkt is alleen nodig als isInFullScreen niet true is. In browsers waar full-screen mode niet kan worden ingeschakeld door JavaScript, kan isInFullScreen nooit true worden.
De bruikbaarheid van dit script is beperkt
Bij alle grote browsers gebeurt iets merkwaardigs: Als je met F11 (de fysieke knop op het toetsenbord) het document in full-screen-mode zet, werkt de knop in het document niet meer … Dit wordt veroorzaakt door het JavaScript dat het gedrag van de knop bestuurt.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<script>
function toggleFullscreenMode() {
var isInFullScreen = (document.fullscreenElement &&
document.fullscreenElement !== null) ||
(document.webkitFullscreenElement &&
document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement &&
document.mozFullScreenElement !== null);

var docElm = document.documentElement;
if (!isInFullScreen) {
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else { // Foutmelding bij IE
window.alert('Dit werkt niet met deze browser.\nGebruik F11 op uw toetsenbord.')
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
</script>

(Zet dit in de <BODY> op de plaats waar de knop moet verschijnen).

<button onclick="toggleFullscreenMode()" type="button"><b>F11</b></button>

Downloaden:

Druk op de knop: File: voorb503.zip, 597 bytes.