JQuery para abrir enlaces en nueva ventana sin target _blank
Patxi Echarte,
04. Feb, 2012,
5 Comentarios
JavaScript
Hace varios años, en el año 2005, publiqué una entrada sobre este mismo tema, que aún hoy sigue siendo una de las más visitadas del blog. En ese post explicaba como abrir enlaces en ventana nueva sin utilizar target _blank, de dos maneras diferentes. Lo que ponía en ese post sigue siendo válido hoy en día, sin embargo, actualmente hay librerías como JQuery que nos permiten realizar esa misma tarea de forma más sencilla.
El funcionamiento se basa en utilizar una clase CSS que nos permita identificar qué enlaces queremos abrir en ventana nueva. Mediante JQuery haremos que cuando se haga click en estos enlaces, en vez de ir directamente a la página de destino, se abra una nueva ventana.
Lo primero que haremos será identificar los enlaces que queremos abrir en ventana nueva con la clase CSS external.
... <a href="http://www.google.com" class="external">Enlace a Google</a> <a href="http://www.yahoo.com" class="external">Enlace a Yahoo</a> <a href="http://www.facebook.com" class="external">Enlace a Facebook</a> ... |
Una vez identificados los enlaces, necesitamos el código JavaScript JQuery que se encargará de abrir los enlaces en una nueva ventana.
<script type="text/javascript"> $(document).ready(function(){ $("a.external").click(function() { url = $(this).attr("href"); window.open(url, '_blank'); return false; }); }); </script> |
Cuando el documento ya está listo, este código lo que hace es añadir un evento onClick a todos los enlaces que tengan la clase CSS external. Cuando se hace click en uno de estos enlaces se abre una nueva ventana y se devuelve false para prevenir que la página actual se modifique.
Como el evento se asigna a los enlaces al cargar la página, en el caso de que creemos elementos dinámicamente o carguemos información por Ajax, hay que tener en cuenta que los nuevos enlaces no tendrán el evento asociado, por lo que se abrirán en la misma ventana. Para evitarlo debemos asignar el evento a los nuevos enlaces que se creen.
Podríamos crear una función a la que llamaríamos tanto al cargar la página como al crear los nuevos elementos, sin embargo JQuery dispone de una opción muy interesante, basada en asignar los eventos mediante el método live. Este método se encarga de asignar el evento que se le diga a los elementos existentes y a los que se creen.
<script type="text/javascript"> $(document).ready(function(){ $("a.external").live('click', function() { url = $(this).attr("href"); window.open(url, '_blank'); return false; }); }); </script> |
A partir de este momento, los nuevos enlaces que tengan la clase CSS external se abrirán en ventana nueva. Si en algún momento queremos que deje de realizarse la asignación del evento de forma automática basta con llamar al método die.
$("a.external").die('click'); |
Muchas gracias por el aporte. Funciona a la primera!
Creo que algo estoy haciendo mal, intenté usar esta función en una sección de mi página (portafolio) y no logro que funcione.
n pued ver videoos en la laptop no se reprodar ucen …… y me sale q teng q tienes activado JavaScript. Actívalo para poder ver los resultados correctamente
digamen cm activarlo.
Amigo muy bueno tu aporte solo que esta desactualizado, y siempre es bueno trabajar con lo mas reciente para evitar problemas. Los metodos «live» y «die» son obsoletos ya, y fueron desaprobados a partir de la version JQuery 1.7, actualmente debes de usar «on» y «off» por lo que hay que sustituir
«.live» –> por «.on»
«.die» –> por «.off»