feed twitter facebook LinkedIn facebook

jQuery » Cambiar el target de los enlaces con jQuery

junio 10, 2010 por Víctor Cuervo 9 Comentarios Imprimir Imprimir

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

Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , , , ,

Artículos relacionados:

9 comentarios »

RSS feed para los comentarios de esta entrada.TrackBack URI

  1. Bitacoras.com
    junio 10, 2010 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: No hay resumen disponible para esta anotación…

  2. Maria Fernandez
    octubre 21, 2010 #

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

  3. Melquisedec Alvarado Marín
    marzo 10, 2011 #

    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().

  4. lineadecodigo
    marzo 10, 2011 #

    @Melquisedec Alvarado Marín,

    Correcto. :-D

  5. lineadecodigo
    marzo 10, 2011 #

    @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"}); 
    });
  6. lineadecodigo
    marzo 10, 2011 #

    @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.

  7. Linea de Codigo » Enlaces de _top a _self con jQuery
    marzo 11, 2011 #

    [...] jQuery Marzo 11, 2011 por lineadecodigo . 1 visitas Sin Comentarios  Imprimir En el artículo Cambiar el target de los enlaces con jQuery veíamos como podíamos meter un target "_blank" a ciertos enlaces de la página.Pero, ¿qué hacer [...]

  8. hector
    septiembre 3, 2012 #

    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”

  9. Víctor Cuervo
    septiembre 9, 2012 #

    @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.

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*