Cómo abrir enlaces en ventana nueva sin utilizar target _blank
Patxi Echarte,
11. Abr, 2005,
45 Comentarios
JavaScript, XHTML
La forma tradicional de abrir un enlace en ventana nueva ha sido siempre la utilización de un atributo target="_blank" en el enlace, sin embargo si quieres que tu página valide como XHTML estricto, esa opción no es válida, ya que el atributo target no está permitido. Para poder disponer de los enlaces en ventana nueva dispones de dos opciones, relajar tus requerimiento de validación para que la página valide como XHTML transitional, o utilizar JavaScript.
[note color=»#FFFF99″] Actualización: si quieres saber cómo abrir enlaces en ventana nueva de forma más actual, puedes ver este post en el que explico cómo hacerlo utilizando JQuery. [/note]
El pasar la página a transitional puede ser la solución en algunos casos, pero no debería ser lo habitual, ya que este tipo de documento se ha definido como un documento estricto con algunas libertades provenientes de las antiguas y no tan antiguas sopas de etiquetas.
Si queremos mantener el doctype como strict y poder disponer de la opción de abrir enlaces en ventana nueva, podemos utilizar javascript y eventos para conseguirlo. Vamos a ver dos formas de hacerlo, la primera se basa en la utilización de un método genérico onclick a nivel de documento y la segunda en la incorporación de una función al evento onclick de cada enlace. Las dos opciones pasan por la utilización de un estilo específico que será el que utilizará javascript para identificar que tiene que abrir el enlace en ventana nueva. Si no te gusta utilizar un class para algo que no es propiamente estilo podrías crear un atributo específico y crear tu propio DTD derivando del estándar, pero la idea sería la misma.
En cualquiera de los dos casos siguientes la utilización del class «external» no implica que no se pueda utilizar otro class para dar formato a los enlaces. Si te hace falta indicar un estilo específico para un enlace puedes utilizar algo como class="menu external", para indicar que el enlace tiene los estilos de menu y también que es «external».
Método común a nivel de document
Para este ejemplo utilizamos el siguiente código html, el cual como puede verse utiliza un doctype de tipo strict. El ejemplo consta de dos enlaces, uno para abrir en la misma ventana y otro en ventana nueva. Para ello se utiliza una función de nombre openTargetBlank la cual se asocia con el evento document.onclick. Esto hace que cada vez que se genere este evento y no se capture en la etiqueta que lo ha producido o en alguno de sus padres, «burbujee» hasta hasta llegar a document.onclick, donde lo capturaríamos para tratarlo. En tratamiento consiste en comprobar si es un elemento de tipo enlace A y si dentro de su atributo class contiene la cadena «external». Si es así se abre la url del enlace mediante window.open en ventana nueva y se devuelve false para finalizar el tratamiento del evento e impedir así que la página en la que estemos cambie también a la url de destino.
<script type="text/javascript"> function openTargetBlank(e){ var className = 'external'; if (!e) var e = window.event; var clickedObj = e.target ? e.target : e.srcElement; if(clickedObj.nodeName == 'A' ){ r=new RegExp("(^| )"+className+"($| )"); if(r.test(clickedObj.className)){ window.open(clickedObj.href); return false; } } } document.onclick = openTargetBlank; </script> |
Método asociado al onclick de cada enlace
En este caso vamos a utilizar un html equivalente al anterior, pero la forma de actuar va a ser ligeramente diferente. En vez de tener una función encargada de capturar todos los eventos onclick que lleguen a nivel de document, lo cual puede ser algo ineficiente, vamos a añadir una función al evento onclick de cada enlace con clase «external». Para ello utilizamos una función prepareTargetBlank a la cual se llama en el onload y que se encarga de revisar el html de la página y añadir una función anónima a todos aquellas etiquetas que sean enlaces y que tengan un class que contenga «external».
function prepareTargetBlank(){ var className = 'external'; var as = document.getElementsByTagName('a'); for(i=0;i<as.length;i++){ var a = as[i]; r=new RegExp("(^| )"+className+"($| )"); if(r.test(a.className)){ a.onclick = function(){ window.open(this.href); return false; } } } } window.onload = prepareTargetBlank; </script> |
Por el momento utilicé la variante más sencilla pues desconocía de todas, luego iré probando las otras. Lo que todavía no entiendo es sí la funcionabilidad es la misma. Muchas gracias por esta nota. Martín Riva.
Martín, la funcionalidad de la función (valga la redundancia) es tener un parámetro equivalente a target=»_blank» de HTML, puesto que este ya no es valido en XHTML.
Muy buen código, realmente estaba buscando algo como esto.
Muy interesante, cabe resaltar que se lanza la función definida en el onclick y deja de lanzarse la definición hecha en el href. Muy buen código. Me ha ayudado bastante.
Si pudieras explicar el porque deja de lanzarse el href, esto porque en pruebas que he realizado siempre se me lanzaba el href además del onclick, hasta que encontre tu código y resolvio este problema.
Hola Valentin, el truco para que no se lance la url del href radica en el «return false» de la función. Si el resultado de ejecutar el evento onclick es false produce que no se realice la acción indicada en el href.
Si el w3 saco el atributo target no fue por capricho(que a veces los tiene), si no para darle mas libertad al usuario, que el decida donde abrir los enlaces(misma tab|ventana o nueva), ahora si despues de esto por X motivo quieren seguir usando nuevas ventanas podrian usar el atributo rel(external), ej links hacia otras paginas con un rel external tendria «semantica» y abriria en una nueva ventana.
Saludos
Mi Web está en construcción todavía, pero necesito urgente que me respondan como puedo abrir nueva ventana haciendo clic en un hipervinculo usando html, gracias
Atte
Giovana Vivar
Hola amigos, el código es fantastico, pero me surje una duda, se podría agregar al código algo que le de unas dimensiones personalizadas al abrir la nueva ventana.
En este caso me gustaría que fuese 800 x 600.
Gracias
Sí, la función de javascript window.open que se utiliza tiene varios parámetros que entre otras cosas permiten especificar el tamaño de la nueva ventana. Tienes información al respecto en esta página
Pregunta: Para qué resolución está hecho el código?
ambos métodos controlan el comportamiento de los enlaces y son completamente independientes de la resolución
Saludos amigos, tengo una duda con respecto a abrir ventanas. necesito abrir una nueva ventana desde un link, pero que ésta ventana al abrirse se muestre sin la barra de dirección, herramientas y menu. se hacer esto con la funcion window.open en javascript pero la cuestion es que la pagina donde va a estar el link que abra esta ventanita no tiene codigo javascript, es decir no puedo usar el window.open. quisiera saber si existe la posibilidad de que la ventanita se «autoconfigure» sin las barras al momento de mostrarse
Tengo una duda:
como cargo en un frame (html) una pagina php en el centro y otro html a la izquierda sin usar enlaces, tal vez con el header?? es que no se si el target se puede utilizar en php o como lo hago ?.
gracias
Hay otra solución que en caso de no tener javascript habilitado nos abre el enlace en la misma ventana
Sustituir
target=»_blank» por
onclick=»return ! window.open(this.href);»
A ver como os va
¡Muy bien! Me sirvió el artículo para validar con XHTML 1.0 estricto una página con ventana externa. Muchas gracias.
He modificado el código para poder abrir dos tipos distintos de pop-up y poder ejecutar el window.print():
function openTargetBlank(e){
var className = ‘external’;
var className2 = ‘external2’;
var className3 = ‘print’;
if (!e) var e = window.event;
var clickedObj = e.target ? e.target : e.srcElement;
if(clickedObj.nodeName == ‘A’ )
{
r=new RegExp(«(^| )»+className+»($| )»);
r2=new RegExp(«(^| )»+className2+»($| )»);
r3=new RegExp(«(^| )»+className3+»($| )»);
if(r.test(clickedObj.className)){
MM_openBrWindowPopUp2(clickedObj.href,’popup’,500,300);
return false;
}
if(r2.test(clickedObj.className)){
MM_openBrWindow(clickedObj.href,’newWindow’,’toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=500,height=500′)
return false;
}
if(r3.test(clickedObj.className)){
window.print();
return false;
}
}
}
document.onclick = openTargetBlank;
—————————-
Saludos y muchas gracias por el código original!!
Utilicé:
_return ! window.open(this.href)
Como puedo configurar tamaño, sin barras, sin direcciones de la nueva ventana sin usar javascript.
Gracias y saludos
Buenos días, me llamo María y no me ha solucionado mucho lo que realmente busco y es q he creado una ventana personalizada pero quiro q todos los usuarios vean el mismo tamaño height en % sin embargo el explorer 7.0 no me lo acepta y me la abre en px.
¿que puedo hacer? me estoy volviendo loca,,,
gracias
Hola a todos,
me gustaria saber si hay alguna manera de abrir siempre una ventana, no dependiendo de como lo tenga configurado el usuario. Es decir que aunque el usuario tenga configurado que las nuevas ventanas se abran en un tab (o pestaña), la pagina se abra en una ventana emergente.
Gracias
impresionante codigo, muchas gracias
Logro mostrar un pdf en la misma ventana pero no puedo hacer que el boton back del mismo me lleve a la pagina que lo invoco.
dasdsa saSas
Hola a todos.
Necesito algo basico pero estoy muy perdido.
Se trata de un blog de blogger, por lo que entiendo su código es html y no xhtml.
Me gustaría poder abrir las imágenes del blog en nueva ventana al clickear sobre ellas.
Ojala alguien con paciencia de explicarme esto que es muy básico. Gracias.
Por si a alguien le interesa he portado el script a Mootools para utilizarlo de forma genérica con la librería mootools:
http://shakaran.es/blog/2008/07/cumplir-estandar-w3c-con-target-blank-utilizando-mootools/
Millon de gracias!
Justo lo que necesitaba pa’q el formulario de contacto abriera en una nueva pagina para que no se perdiera la pagina de inicio.
Gracias!!!
ya u sabe puesto para esto
exelente codigo.
pero tengo una duda haber si me puedes ayudar. existe alguna forma de abrir un nuevo link en una pestana nueva, se que blank dependiendo del navegador se abre en una ventana o en una pestana nueva pero como hago para que solo se abra en una pestana nueva. gracias
Qué puedo hacer para que este código HTML vaya embedido en una página web abriéndose una nueva ventana?
Link:
Muchas gracias por vuestra ayuda 🙂
el link seria:
——Link: ——-
bueno…parece que no me lo dejan poner:
Patxi,
Gracias por el script. Añadido al plugin WP Smart Image con su respectivo crédito en el panel.
Saludos!
Tengo una pagina con 5 secciones que se lanzan por menu.
La primera seccion lanza automaticamente un Popup. Y este Popup tiene un link.
Mi consulta es: ¿Como puedo hacer para que el link del Popup me active la ventana de la Pagina y si fuera posible mostrandose la ultima seccion?
Gracias de antemano
Muchas gracias por el post, lo voy a probar ya mismo.
Un saludo
Muchas Gracias por la aportacion. Un saludo.
Hola, necesito un script donde pueda abrir una ventana nueva pero sin hacer clic, y que yo pueda cambiar el tamaño de esa ventana, gracias.
Como podriamos hacer que un documento index.html se abriese en otra ventana nueva y luego una foto cualquiera en otra ventana nueva?
Hola quiero abrir unos link pero estan dentro de un arreglo y lo que quiero es abrirlos como ventana, sin barra de herramientas y demás
Muchas gracias amigo, me fue de mucha ayuda…
Gracias!!!
los que somos estrictos siempre queremos validar.
muy bueno
Muy buena la información, he usado el código y ha funcionado. Gracias!
tan dificil es abrir en una ventana nueva en lugar de pestaña?
porque los navegadores no nos dan esa posibilidad en sus opciones?
Muy buen tuto