Externe Links automatisch im neuen Tab öffnen

Externe Links sind Verweise, die auf eine fremde Website zeigen. Um den Besucher deiner Website nicht zu verlieren, sollte sich ein Link nach außen immer in einem neuen Fenster öffnen.

Externe Links mit JavaScript erkennen

Zunächst muss dein Script wissen, wie es ausgehende Verweise erkennen kann. Über window.location.host erhältst du den Servernamen deines Webservers, in meinem Fall „wp-styles.de“. Alle Links, deren URI nicht diesen Namen enthalten, sind demnach externe Links.

var pattern = new RegExp( "/" + window.location.host + "/" );

$( "a" ).each( function () {
    if ( !pattern.test( this.href ) ) {
        // External link
    }
} );

Falls du das Snippet etwas performanter gestalten möchtest, kannst du den Selektor z.B. mit "#main a" auf den Content Bereich deiner Seite eingrenzen.

Neuer Tab = Target „blank“

Danach musst du nur noch einen EventListener für jeden ausgehenden Link registrieren. Trifft das Ereignis ein, wird das Ziel des Links in einem neuen Fenster geöffnet.

var pattern = new RegExp( "/" + window.location.host + "/" );

$( "a" ).each( function () {
    if ( !pattern.test( this.href ) ) {
        $( this ).on( "click", function ( event ) {
            event.preventDefault();
            event.stopPropagation();
            window.open( this.href, "_blank" );
        } );
    }
} );

Kopiere dieses Snippet einfach in die functions.js Datei deiner Website und erhöhe automatisch die Verweildauer deiner Besucher.

Teile diesen Beitrag