Websites met stijl

38. Alternatieve sluit-link en terug-link

De hoofdstukken na hoofdstuk 34 bevatten nieuwe artikelen over allerlei onderwerpen. Dit is het vierde artikel.

In dit hoofdstuk

Inleiding

In dit hoofdstukje gaan we twee links maken die net zo werken als en (de sluit-knop en de terug-knop) van de webbrowser.

Waarom zou je zulke links nodig hebben op je website?

Op deze website vind je een voorbeeld: je leest nu hoofdstuk 38. Als je in het menu op 'naslag' klikt om daar een pagina te raadplegen opent die in een nieuw venster.

Opmerking: dat gaat met een link met het attribuut target="_blank". Zie 'meer over hyperlinks' in hoofdstuk 5 van deze cursus of in de naslag.

Om weer terug te keren naar hoofdstuk 38 moet je de naslagpagina sluiten. Dat kan natuurlijk door in je browser op de sluitknop van het betreffende venster te klikken.
Maar het is gebruiksvriendelijker om op de webpagina is gebruiks­vriendelijker een link Sluit dit venster op te nemen.

Ik had er ook voor kunnen kiezen om de naslagpagina's niet in een nieuw venster te openen, dan zou de bezoeker de terug-knop van de browser moeten gebruiken om vanuit de naslag terug te keren naar hoodstuk 38.
In dat geval zou een extra link Terug naar die pagina de webpagina gebruiks­vriendelijker maken.

Hoe die knoppen te maken

Er is geen html-code die het mogelijk maakt een venster te sluiten en ook voor de 'link-terug' is er geen mogelijkheid in html.

Je zou misschien denken aan de volgende 'terug-link': <a href="cursus38.html">terug</a> , maar die werkt alleen goed als je vanaf hoofdstuk 38 naar de naslag gaat. Een bezoeker die bijvoorbeeld van hoofdstuk 15 naar de naslag gaat komt met de terug-link nog steeds'terug in hoofstuk 38, en dat is niet de bedoeling.

Het blijkt dat in beide gevallen gebruik gemaakt moet worden van een klein stukje Javascript code. (Javascript is een taal die bijzonder geschikt is om kleine taakjes op een website uit te voeren.). En daaarmee gaan we hieronder aan de slag.

Ik ga verder niet in op het gebruik van Javascript. Het leren van die taal is een project op zich en daar kan ik je niet mee helpen omdat ik onvoldoende kenneis van Javascript heb.
Wil je er toch meer van weten, kijk dan naar de engelstalige cursus van w3schools: https://www.w3schools.com/js/.

De sluit-link

Zet de code van figuur 1 op de gewenste plaats op je webpagina. Klaar!
In he website zie je dan: Sluit dit venster. Met een klik wordt het venster gesloten.

figuur 1 <script>
<!--
document.write('<A HREF="JavaScript:parent.close()">Sluit dit venster</A>') //-->
</script>

Toelichting bij de code

Alles wat binnen het element script staat wordt door het browser-programma als JavaScript geïnterpreteerd.

De commentaarcodes <!-- en --> zorgen ervoor dat browsers die geen JavaScript kennen de code als commentaar zien. Die browsers laten de link dus niet zien, maar geven ook geen foutmelding.

De eigenlijke code staat op de regel die begint met document.write. Eigenlijk staat op die regel dat er een link moet worden neergezet: <A HREF="....">Sluit dit venster</A>
Op de plaats van de puntjes staat de 'bestemming' van de link: parent-close. Dat heeft tot gevolg dat het venster gesloten wordt en wordt teruggekeerd naar de parent, de pagina vanwaaruit het venster geopend werd.

Let op

De sluit-link werkt alleen in een venster dat geopend is met een link met het attribuut target="_blank" (een link die in een nieuw venster wordt geopend. Zie 'Meer over hyperlinks'in hoofdstuk 5 van deze cursus.)

De terug-link

Zet de code van figuur 2 op de gewenste plaats op je webpagina. Klaar!
Deze code toont de link: Terug

figuur 2 <script>
<!--
document.write('<A HREF="JavaScript:history.go(-1) ()">Terug</A>') //-->
</script>
)

Toelichting bij de code

De code is bijna hetzelfde als die van de sluit-link. Het belangrijkste verschil is de 'bestemming van de link': die is hier history.go(-1). Dat betekent dat 1 stap terug gegaan wordt in de blader-geschiedenis: terug naar de vorige pagina dus.

Met history.go(-2) ga je 2 stappen terug in de bladergeschiedenis, met history.go(1) ga je een stap vooruit.

Let op

Deze link heeft geen affect wanneer er niet gebladerd is binnen de website.

- Einde -