Marcar enlaces externos con jQuery

Cuando creamos una página web tendremos diferentes tipos de enlaces: sobre la misma página, sobre páginas externas, que se abran en el mismo marco, en un marco nuevo,…

Como ayuda visual podemos adjuntar una imagen que denote que el enlace es externo o que se abre en una nueva ventana. Por ejemplo:

Manual Web

Posiblemente, lo más fácil sea crear una clase CSS que nos permita demarcar con un estilo estos tipos de enlaces. Si bien, en ese caso estaremos dejando en manos del desarrollador el acto de marcar con el estilo CSS en enlace.

Por otro lado podemos marcar enlaces externos con jQuery de forma dinámica. Para ello lo primero que vamos a hacer es poner los enlaces en la página:

<h1>Marcar enlaces externos</h1>
<a href="http://www.google.com" title="Google" target="_blank" rel="noopener">Google</a><br>
<a href="https://lineadecodigo.com" title="Linea de Código">Linea de Código</a><br>
<a href="http://www.manualweb.net" title="Manual Web" target="_blank" rel="noopener">Manual Web</a><br>
<a href="http://www.w3api.com" title="W3Api" target="_blank" rel="noopener">W3Api.com</a>

Es importante que trataremos aquellos que tengan el atributo target con el valor «_blank». Ahora incluiremos el código jQuery que nos detecte estos tipos de enlaces para incorporarles el icono.

Como siempre, incluiremos la función ready() para saber que se ha cargado todo el documento y empezar a manipular la página.

$(document).ready(function(){
 // Código jQuery
});

Lo importante del ejemplo es saber que selector tenemos que utilizar para acceder a los elementos anchor – A con un atributo target igual a «_blank». Para ello indicaremos el nombre del elemento (A) y pondremos el atributo y su valor dentro de un corchete. Quedándonos el siguiente selector:

$("A[target=_blank]")

El método que nos permite insertar código HTML detrás de un elemento con jQuery es .after(). Este método recibe como parámetro el código HTML a insertar. En nuestro caso la carga de una imagen.

Por lo tanto nos quedaría el siguiente código jQuery:

$("a[target=_blank]").after("<img src="new_window.gif" title="new window">");

Todo el código jQuery sería el siguiente…

$(document).ready(function(){
  $("a[target=_blank]").after("<img src="new_window.gif" title="new window">"); 
});

… como se puede apreciar, poco código para un gran efecto.

Publicaciones relacionadas:

Enlaces de _top a _self con jQuery Modificar el contenido de una capa con jQuery Seleccionar un texto solo si no ha cambiado Efecto leer más texto simplificado con jQuery Efecto slide con jQuery