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 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 gebruiksvriendelijker 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':
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 de website zie je dan: Sluit dit venster.
Met een klik wordt het venster gesloten.
<!--
document.write('<A HREF="JavaScript:parent.close()">Sluit dit venster</A>') //-->
</script>
Toelichting bij de code
Alles wat binnen het element
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
<!--
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 effect wanneer er niet gebladerd is binnen de website.
Alternatief
In plaats van history.go(1) mag je ook history.back gebruiken.