Blog what I write

Abrir enlaces externos en nueva ventana añadiendo class external y _blank target al vuelo con jQuery

post - - 2 replies -

Hace tiempo (2009 y como pasa de rápido…) hablábamos de esto mismo en _blank, rel=”external” y una solución jQuery para abrir enlace en nueva ventana. Ahora traigo una revisión del snippet con esa misma funcionalidad pero un poco más completa y optimziada.

Código jQuery

jQuery(document).ready(function($) { 	
     //open external links in new window
     $('a:not([href^="http://aurea.es"]):not([href^="#"]):not([href^="/"])').addClass('external');
     $('a[class="external"]').click(function(){ $(this).attr('target','_blank'); });
}); 

Explicación

  1. Comenzamos el mítico método ready de jQuery, encargado de comprobar si el DOM esta cargado y preparado para usarse. Tengamos en cuenta que deben estar todos los tags de enlaces ya descargados en el navegador para luego lanzar las operaciones sobre ellos.

  2. A continuación hacemos 3 comprobaciones basadas en el atributo “href”. Que el link no comience con el “dominio del sitio web” (link absoluto), que no comience por “#” (link ancla), y que no comience por “/” (link relativo). A todos los enlaces que cumplen esto se les añade la clase “external”, ejemplo: class="external".

  3. Una vez tenemos identificados todos los enlaces externos, ya solo queda preparar un evento .click() que añada el atributo target con valor blank (nueva ventana/tab) cuando el evento se dispare.

  • Daniel

    Excelente aporte compañero, tengo implementado jquery.jscrollpane dentro de este jquery.pikachoose y esta erá la función que me hacia falta para tenerlo todo listo.

    Muchas gracias!

    • De nada Daniel! gracias por molestarte en comentar 😉