
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
- 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. - 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"
. - Una vez tenemos identificados todos los enlaces externos, ya solo queda preparar un evento
.click()
que añada el atributotarget
con valorblank
(nueva ventana/tab) cuando el evento se dispare.
2 Comments
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!
javiaurea
De nada Daniel! gracias por molestarte en comentar 😉
Comments are closed for this post