Externe links in nieuw venster met jQuery

15 april 2009, door

Als je bezoekers op een affiliate link klikken, wil je waarschijnlijk graag dat deze pagina zich opent in een nieuw venster. Op deze manier weet je dat de bezoeker na het sluiten van dat venster in ieder geval weer terug op jouw site komt. Om dat te doen kun je het attribuut ‘target’ aan je links toevoegen waardoor het er als volgt uit komt te zien:
<a href="http://www.example.com" target="_blank">de linktekst</a>

Op deze manier worden de bezoekers netjes in een nieuw venster doorverwezen naar de adverteerder. Helaas wordt het target attribuut niet langer ondersteund in XHTML1.1. Dat betekent dat browsers het wel gewoon zullen blijven ondersteunen, maar dat het in de toekomst niet meer tot de standaard behoort. Als je de code van je website dus wilt kunnen blijven valideren, dien je het anders aan te pakken. En validatie van je code is een handige manier om te checken of je website technisch in orde is, zodat je bijvoorbeeld kunt voorkomen dat zoekmachines op foute code vastlopen.

Een mooi alternatief is het volgende jQuery script:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel=external]").each(function(i){
this.target="_blank";
});
});
</script>

Deze code plaats je in je HEAD en dan werkt het als je het jquery.js script hier download en op je server zet. Door het ‘rel=external’ attribuut aan je uitgaande links toe te voegen, komt je link er als volgt uit te zien:
<a href="http://www.example.com" rel="external">de linktekst</a>

jQuery kan voor nog veel meer zaken gebruikt worden, zowel voor functionaliteiten als voor je website design. Zo kun je hier een reeks jQuery tutorials vinden, en staan hier een aantal voorbeeldscripts.

Succes met de implementatie! Hebben jullie nog handige scriptjes die je wilt delen? :)

Dit bericht is geschreven op woensdag 15 april, 2009 om 16:17
en staat in de rubriek Ontwikkelingen en tips, Website promotietips

4 Reacties op “Externe links in nieuw venster met jQuery”

  1. Robin Eggenkamp Zegt:
    16 april, 2009 at 21:00

    Leuke tip! Je kunt een vergelijkbare techniek gebruiken om uitgaande links (of bv downloads) te tracken met Google Analytics. Je neemt hiervoor het volgende stukje code op in de ready functie:

    $("a[rel*='external']").click(function(){
	pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));
});

    Je moet in dit geval wel zorgen dat de Google Analytics code bovenin je body wordt geladen.

  2. Niels Zegt:
    16 april, 2009 at 21:19

    Om Ruuds script te laten werken in de nieuwste jquery (1.3): even het apestaartje verwijderen uit a[@rel=external].

    Of nog beter, gebruik de selector uit Robins script: a[rel*=external], dan kan je ook nofollow aan het rel attribuut toevoegen met alle voordelen vandien, zo dus: rel=”nofollow external”.

  3. Ruud Kok Zegt:
    22 april, 2009 at 20:43

    Bedankt voor de reacties, ik heb het apenstaartje inderdaad verwijderd.

  4. Daniël de Leeuw Zegt:
    9 mei, 2009 at 21:15

    Het is ook goed mogelijk zonder JQuery, wat flink wat dataverkeer en enige laadtijd scheelt:

    window.onload = function () {
    for(var i = 0; i < document.getElementsByTagName(‘a’).length; i++) {
    if(document.getElementsByTagName(‘a’).item(i).getAttribute(‘rel’) == ‘external’)
    document.getElementsByTagName(‘a’).item(i).setAttribute(‘target’, ‘_blank’);
    }
    }

Plaats nu je reactie: