Externe links openen in nieuw venster

PDF version

In XHTML is het gebruik van het target-attribuut niet toegestaan. Maar hoe kun je dan een website openen in een nieuw venster/tabblad? Met JavaScript! En met het script in dit artikel, kun je dit nog automatisch laten doen ook!

Target-attribuut

In HTML kun je gebruik maken van:

1
<a href="http://www.maxiblue.nl" target="_blank">Link</a>

Hier is natuurlijk niets mis mee, maar het zou natuurlijk wel handig zijn als dit automatisch ging. In dit artikel behandel ik deze specifieke situatie niet, maar geef ik wel een voorbeeld voor XHTML. Dit voorbeeld zal ook in HTML werken.

XHTML + Javascript

De eenvoudigste oplossing om een link te openen in een nieuw venster/tabblad, is door gebruik te maken van de onclick.

1
<a href="http://www.maxiblue.nl" onclick="window.open(this.href); return false;">Link</a>

Vergeet vooral niet om return false op te nemen ná de window.open. Anders zal de website netjes in een nieuw venster geopend worden, maar ook in het huidige venster! De return false zorgt ervoor dat de normale navigatie afgebroken wordt.

Automatisch met jQuery

Bij iedere link een onclick opnemen, is niet alleen veel werk, maar er bestaat ook een grote kans dat er één vergeten wordt. Daarnaast is het niet bepaald bevorderlijk voor de overzichtelijkheid van de code.

Met jQuery is het vrij eenvoudig om alle externe links in één keer te voorzien van een onclick.

1
2
3
4
5
$(document).ready(function(){
  $("a[href^='http']").click(function(){
    window.open(this.href); return false;
  });
});

Dit beroemde voorbeeld heeft echter één nadeel. Wanneer je interne links ook voorziet van http://…, zullen ook deze in een nieuw venster geopend worden. Daarom is het volgende script een nog betere oplossing.

1
2
3
4
5
$(document).ready(function(){
  $("a[href^='http']").not("a[href^='http://" + location.hostname + "']").click(function(){
    window.open(this.href); return false;
  });
});

Dit script slaat links over die dezelfde hostname (domein) hebben als de huidige pagina. Interne links die met https beginnen worden niet meegenomen. Gebruik je wel ssl, dan zul je hier nog een kleine aanpassing voor moeten maken.

157 Comments

IsaacFebruary 9th, 2015 at 20:05

.

hello….

JoshuaFebruary 9th, 2015 at 20:43

.

ñïñ!…

isaacFebruary 11th, 2015 at 04:33

.

tnx!…

LeeFebruary 11th, 2015 at 08:28

.

thanks for information!…

GilbertFebruary 11th, 2015 at 09:03

.

áëàãîäàðþ!!…

RichardFebruary 12th, 2015 at 07:09

.

tnx for info!!…

tomFebruary 12th, 2015 at 09:07

.

tnx for info….

Leave a comment

Your comment