
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
readyde 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 atributotargetcon 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