Website openen in full-screen mode

Veel browsers, zo niet alle, hebben de mogelijkheid om een website in full-screen mode te bekijken. Dat wil zeggen dat het hele scherm wordt gebruikt om de site weer te geven. Zelfs de randen van het window en de titelbalk verdwijnen, alleen de webpagina is zichtbaar. Gewoonlijk is F11 de toets waarmee je dit in- en uitschakelt.

Voor sommige doeleinden is het handig als een link opent in full-screen mode, dus als de gelinkte pagina het hele scherm vult. Als de gebruiker terug gaat naar de aanroepende pagina, wordt ook de full-screen mode uitgeschakeld.

Op deze pagina wordt een script besproken dat de bovengenoemde functionaliteit levert. Inspiratie en een deel van de code zijn ontleend aan een artikel in Webdesigner Magazine nr. 82 (december 2015), pag. 60 t.m. 63. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Bij de toepassing op deze site zijn de HTML en de CSS aangepast om het optimaal te laten werken. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site
   
• De werking van het script
• De code bestaat uit HTML, CSS en JavaScript. De CSS staat in de file styles.css. Het JavaScript staat in de file fullscreen.js. Die hoef je niet te veranderen om het te gebruiken.
• De gelinkte bestanden (web-pagina's en een foto) zijn elk in een eigen <iframe> gezet. De inhoud van deze iframes wordt bij het laden van de pagina direct geladen. De iframes zijn verborgen met behulp van display: none.
• De HTML-code toont (in het voorbeeld) drie knoppen op het scherm. Door te klikken wordt het betreffende <iframe> zichtbaar gemaakt en schermvullend getoond.
   
• De drie knoppen tonen de drie mogelijkheden die er zijn met dit script:
  
  1. Er wordt gelinkt naar een website, deze wordt in full-screen mode getoond.
  2. Als 1, maar bovenaan het scherm verschijnt een balk met daarin het woord "sluiten"
  3. Er wordt gelinkt naar een afbeelding (<img>-tag), die full-screen wordt getoond. Je kunt hier ook een video in zetten met een (<video>-tag).
• De actie van de drie knoppen wordt ingesteld met behulp van addEventListener(). De koppeling loopt via het data-attribuut data-screen.
• De actie van de 'sluiten'-balk (bij de tweede optie) wordt op dezelfde manier ingesteld. De koppeling loopt via het data-attribuut data-action="exit".
   
• De actie bestaat er uit dat een van de <iframe>'s zichtbaar wordt gemaakt door display:block in te stellen.
• Tegelijkertijd wordt via de function fullscreen() de function requestFullscreen() aangeroepen, die zet het window in de full-screen stand.
• Teruggaan naar de aanroepende pagina gebeurt door voor het betreffende <iframe> weer display:none in te stellen. De full-screen mode wordt verlaten dooordat de function extFullscreen() wordt aangeroepen via fullscreen_exit().
   
• De functions requestFullscreen() en exitFullscreen() zijn er in vier smaken. Dit komt omdat er hier nog browser-afhankelijke implementaties zijn:
  
  • requestFullscreen() en exitFullscreen() Dit zou de JavaScript standaard moeten zijn. Tests hebben echter uitgewezen dat deze versie door alle grote browsers wordt genegeerd.
  • msRequestFullscreen() en msExitFullscreen(). Dit zou de implementatie in Internet Explorer moeten zjn. Vreemd genoeg doen die functions niets, waardoor het in IE niet werkt. Op de websites van Microsoft wordt bevestigd dat dit inderdaad het geval is.
  • mozRequestFullScreen() en mozCancelFullScreen(). Dit is de versie van Mozilla, dus FireFox. Let op de afwijkende spelling.
    De functions zijn erg traag, waardoor het effect niet echt mooi is.
  • webkitRequestFullscreen() en webkitExitFullscreen(). Dit is de Webkit-versie die wordt gebruikt in Edge, Chrome en Opera. Het werkt vlekkeloos. Bij Chrome en Opera krijg je kort een balkje te zien waarin staat dat je op Escape moet drukken om de full-screen mode te verlaten, maar F11 doet het ook.
   
• Tenslotte zijn er nog de functions $() en $$(). Die zorgen ervoor dat eigenschappen van elementen met een id in combinatie met een data-attribuut efficiënt worden opgehaald. Wees er op bedacht dat de namen van deze functions conflicten kunnen veroorzaken met jQuery en andere platforms!
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Hernoem de file html498a.htm naar bijvoorbeeld index.html.
• Maak voor elke link een <button> aan en maak het bijbehorende <iframe>. Het id van elk <iframe> moet identiek zijn aan de content van het data-screen-attribuut van de bijbehorende<button>
• Zet de juiste links in de <iframe>'s.
• Pas de opmaak van de pagina (lees: de CSS) aan naar je eigen smaak.

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>).

<link rel="stylesheet" href="styles.css">
<script src="fullscreen.js"></script>

(Zet dit in de <BODY>).

<main>
  <h1>Full-Screen Opties</h1>
 
  <button data-screen="screen1">1: Webmasterij.nl</button>
  <button data-screen="screen2">2: Fractal-site</button>
  <button data-screen="screen3">3: Foto</button>
 
  <iframe id="screen1" class="fullscreen" src="https://www.webmasterij.nl/index.html"></iframe>
  <div id="screen2" class="fullscreen">
    <span data-action="exit">Sluiten</span>
    <iframe src="https://www.webmasterij.nl/fractals/index.html"></iframe>
  </div>
  <img id="screen3" class="fullscreen" src="https://www.webmasterij.nl/html/html-0/10-11-2011 09-03 1.jpg">
</main>

Downloaden:
 
Druk op de knop:  File: voorb498.zip, 2132 bytes.