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

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^="https://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.
Compartir:

2 Comments

  • 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!

Comments are closed for this post