Links openen in een nieuw venster
Doel van het NieuwVenster-script is dat bezoekers aan een website zelf moeten kunnen kiezen of externe links wel of niet in een nieuw venster worden geopend. Feit is dat nog lang niet iedereen weet dat de browser zelf daarvoor mogelijkheden biedt. Tevens dient de oplossing in overeenstemming te zijn met de Webrichtlijnen; dus zo standards compliant als praktisch haalbaar is en optimaal toegankelijk.
Het NieuwVenster-script maakt gebruik van DOM, scripting om objecten in het document te creëren en manipuleren, cookies en CSS.
Alle functionaliteit is ondergebracht in één bestand. De (X)HTML-pagina's zelf blijven daardoor valide, compact en bovenal ongecompliceerd.
In het bestand nieuwvenster.js is gedefinieerd dat - in browsers die DOM en scripting ondersteunen - er een element moet worden aangemaakt met een keuzevakje en met de tekst 'Open externe links in een nieuw venster'. Wanneer het keuzevak wordt aangevinkt worden alle externe links voorzien van een eigenschap om de link te openen in een nieuw venster. Tevens wordt een title attribuut toegevoegd met de waarde 'Link opent in een nieuw venster' en wordt een class attribuut toegevoegd met de waarde 'nieuwvenster'. Daarmee wordt de link gekoppeld aan een uiterlijk dat is gedefinieerd in het bestand nieuwvenster.css. In dit voorbeeld wordt na activering een icoontje achter de link geplaatst, waarmee visueel wordt aangegeven dat door de link aan te klikken een nieuw venster wordt geopend.
Verder wordt een cookie aangemaakt, een klein tekstbestandje op de computer van de gebruiker waarin de voorkeur is opgeslagen. Als een andere pagina op dezelfde site wordt opgevraagd wordt het cookie uitgelezen. Indien is aangegeven dat externe links in een nieuw venster moeten worden geopend worden alle externe links bij het laden aan de voorkeur aangepast en wordt het keuzevakje aangevinkt. Als het keuzevak wordt uitgevinkt wordt het hele proces ongedaan gemaakt.
Er is bij de ontwikkeling van het NieuwVenster-script bewust naar gestreefd om implementatie zo eenvoudig mogelijk te houden. Er wordt (ondermeer) daarom geen gebruik gemaakt van JavaScript attributen als onload of onclick. Inhoud, vorm en logica zijn strikt gescheiden. Een dergelijke aanpak biedt voordelen bij de (door)ontwikkeling en het beheer van een website. Dit wordt nader toegelicht in de Webrichtlijnen, op pagina Scheiding tussen structuur en vormgeving.
head sectie van de (X)HTML-bestanden op uw site: <script type="text/javascript" src="[padnaam]/nieuwvenster.js"></script>
<link type="text/css" rel="stylesheet" href="[padnaam]/nieuwvenster.css" />Als gebruik wordt gemaakt van HTML 4.01 dan dient de ' /' aan het eind van het link element te worden verwijderd.
Het is uiteraard mogelijk om aan de stylesheet die met de (X)HTML-bestanden is geassocieerd de eigenschappen van .nieuwvenster en #checkboxVenster naar eigen behoefte aan te passen. nieuwvenster.css bevat voorbeeldcode die op deze pagina's is gebruikt.
De meest recente versie van het NieuwVenster-script is 0.96 (8 januari 2006).
Het script is getest met de browsers die worden vermeld in onderstaande tabel. In alle gevallen bleek de informatie op de pagina's zonder problemen toegankelijk, ook als het script niet werkte. De oorzaak voor het niet werken is in alle gevallen een ontoereikende ondersteuning van DOM door de browser. Met uitzondering van Safari 1.0.3[nl] waren de bevindingen in overeenstemming met de verwachting; in die browser werden alle link aangepast, niet alleen de externe. Een nieuwere versie, Safari 1.3.1[nl], bleek wel te werken zoals bedoeld.
Wie aanvullingen heeft op de tabel, kan deze doorgeven via target@raph.nl.
| Browser naam | Browser versie | Script werkt | Platform | Script versie |
|---|---|---|---|---|
| Amaya | 9.3 | nee | WinXP | 0.97 |
| Blazer | 4.3[en] | nee | Palm OS | 0.97 |
| Epiphany | 1.8.2[en] | ja | Linux | 0.97 |
| Firefox | 1.0.7[nl] | ja | WinXP, Win98, Linux, Mac OSX | 0.97 |
| Firefox | 1.5[nl] | ja | WinXP, Win98, Mac OSX | 0.97 |
| IE | 6.0[nl] | ja | WinXP, Win98 | 0.97 |
| IE Mac | <= 5.2[nl] | nee | Mac OSX | 0.97 |
| Konqueror | 3.4.3[en] | ja | Linux | 0.97 |
| Mozilla | 1.7.12[en] | ja | Linux | 0.97 |
| Netscape | <= 4.7[nl] | nee | WinXP | 0.97 |
| Opera | <= 6.05[nl] | nee | WinXP | 0.97 |
| Opera | 7.0[en] | ja | WinXP | 0.97 |
| Opera | 8.5[nl] | ja | WinXP | 0.97 |
| Safari | 1.0.3[nl] | incorrect | Mac OSX | 0.97 |
| Safari | 1.3.1[nl] | ja | Mac OSX | 0.96 |
class of title attribuut hebben wordt de waarde overschreven. In een oplossing hiervoor is nog niet voorzien.innerHTML in nieuwvenster.js.innerHTML behoort niet tot de formele standaard. De DOM-compliant wijze is ook geïmplementeerd, zodat een DOM-compliant browser die geen innerHTML ondersteunt er toch mee uit de voeten kan. innerHTML is toegevoegd omdat het anders niet zou werken in Internet Explorer. Niet bekend is welke browsers die DOM ondersteunen niet overweg kunnen met innerHTML.class attribuut toegevoegd met de waarde 'nieuwvenster'. In Internet Explorer 6 werkt de oplossing niet zondermeer; het werkt pas als in het JS-bestand link[i].setAttribute((document.all ? 'className' : 'class'), "nieuwvenster"); wordt gebruikt. Kennelijk is er sprake van een bug in Internet Explorer, waardoor een niet bestaand attribuut className wordt verwacht. Bovengenoemde oplossing heeft, voor zover kan worden overzien, geen nadelige invloed op andere browsers.Opmerkingen, vragen, tips en suggesties zijn van harte welkom en kunnen worden gestuurd naar target@raph.nl