Cambiar el target de los enlaces con jQuery

10/jun/2010 jQuery 9 Comentarios
jquery

Una de las cosas más potentes que nos ofrece jQuery es la de poder modificar el contenido del DOM de la página con Javascript que no sea intrusivo. Así, podemos hacer cosas de optimización del código generado. Entre otras cosas, porque hay veces que el código/contenido no es generado por nosotros directamente, si no por terceros.

En este caso, la idea es revisar el código para chequear que los enlaces externos tienen un target blank. Es decir, una estructura del siguiente tipo:

  1. <a href="http://www.manualweb.net" target="_blank">Manual Web</a>

Por cuestiones de accesibilidad os recomiendo que intentéis no utilizar el target blank. Ya que haréis que se pierda el foco de la ventana. Es por ello que este código podemos utilizarlo para los dos casos: poner un blank en los enlaces externos o bien, eliminar todos los blank. Mucho mejor la segunda opción. :-)

Pero pongámonos manos a la obra. Parto de la base de que os habéis leido, o al menos echado un vistazo, al artículo de inicialización en jQuery llamado Hola Mundo con jQuery.

La primera idea es acceder a los elementos HTML que representan el enlace. Es decir, a los anchor (A). Esto lo conseguimos directamente con la función $.

  1. $(a)

Si bien, nos interesan aquellos que empiecen por "http" y que el dominio de inicio no sea el nuestro (en mi caso "lineadecodigo"). Así la expresión de selección sería la siguiente:

  1. $("a[href^='http']")
  2. .not("a[href^='http:\/\/lineadecodigo']")

Si quieres que sean varios dominios, puedes concatenarlos dentro del selector .not(). El selector ..not() es el que hemos utilizado para eliminar del filtro los enlaces de nuestro dominio.

  1. $("a[href^='http']")
  2. .not("a[href^='http:\/\/lineadecodigo'],a[href^='http:\/\/www.manualweb']")

Una vez que tenemos el selector que nos localiza los enlaces que nos interesa, ahora lo que tenemos que hacer es utilizar es .attr(), la cual nos permite a añadir un atributo. En nuestro caso target="_blank". Así el código quedaría de la siguiente forma:

  1. $("a[href^='http']")
  2. .not("a[href^='http:\/\/lineadecodigo'],a[href^='http:\/\/www.manualweb']")
  3. .attr({target: "_blank"});

Espero que el código os sea de ayuda.

Vía: 10REM

Vídeos sobre jQuery

YouTube responded with an error: Serving Limit Exceeded

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

9 comentarios en “Cambiar el target de los enlaces con jQuery”

Víctor Cuervo

Víctor Cuervo

@hector,

Si la página es de un tercero no puedes manipularla ya que te saldrías del contexto de seguridad. Solo puedes manipular páginas tuyas. Es lo que se conoce como Cross-site scripting (XSS).

Saludos.

Víctor Cuervo

hector

QUE TAL BUEN DIA TENGO UN IFRAME LA PAGINA ES DE UN TERCERO POR LO QUE NO PUEDO MODIFICAR EL TARGET ES “_BLANK” COMO PUEDO HACER QU E EL RESULTADO ME LO CAMBIE POR UN TARGET PERSONALIZADO POR EJEMPLO target=”mitarget”

Víctor Cuervo

lineadecodigo

@María Fernandez,

Te hemos publicado el código en
http://lineadecodigo.com/jquery/enlaces-de-top-a-self-con-jquery/

Espero que te sea de ayuda.

Víctor Cuervo

lineadecodigo

@Maria Fernandez,

Filtrando por el atributo target de los elemntos anchor (A). EL código sería el siguiente:

$(document).ready(function(){
	$("a[target*='_top']").attr({target: "_self"}); 
});
Víctor Cuervo

lineadecodigo

@Melquisedec Alvarado Marín,

Correcto. 😀

Víctor Cuervo

Melquisedec Alvarado Marín

Me imagino que si lo que necesito es que sólo los enlaces de Youtube se modifiquen tendría que colocar $(“a[href^=’http:\/\/youtube’]”) sin el selector not().

Víctor Cuervo

Maria Fernandez

¿Como podria cambiar el target cuando el enlace externo ya tiene , por ejemplo target=_TOP y cambiarlo por target _self?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*