Artículos
jQuery

Marcar enlaces externos con jQuery

19/Feb/2009

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 WebNew Window

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.

Código Fuente

Descárgate el código fuente de Marcar enlaces externos con jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios