Cómo abrir enlaces en ventana nueva sin utilizar target _blank
April 11th, 2005La 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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Ejemplo con método común</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
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>
</head>
<body>
<ul>
<li><a href="http://www.google.com">enlace normal a google</a></li>
<li><a href="http://www.google.com" class="external">enlace a google en ventana nueva</a><li>
</ul>
</body>
</html>
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”.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Ejemplo con método común</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
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>
</head>
<body>
<ul>
<li><a href="http://www.google.com">enlace normal a google</a></li>
<li><a href="http://www.google.com" class="external">enlace a google en ventana nueva</a><li>
</ul>
</body>
</html>
October 14th, 2005 a las 8:10 pm
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.
October 20th, 2005 a las 10:22 am
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.
November 22nd, 2005 a las 8:34 am
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.
November 22nd, 2005 a las 2:21 pm
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.
December 28th, 2005 a las 5:36 pm
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
February 3rd, 2006 a las 4:14 am
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
April 9th, 2006 a las 4:07 pm
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
April 10th, 2006 a las 8:55 am
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
June 7th, 2006 a las 7:10 am
Pregunta: Para qué resolución está hecho el código?
June 7th, 2006 a las 10:04 am
ambos métodos controlan el comportamiento de los enlaces y son completamente independientes de la resolución
July 20th, 2006 a las 8:43 pm
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
November 17th, 2006 a las 12:01 am
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
December 18th, 2006 a las 11:16 pm
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
February 19th, 2007 a las 7:43 am
¡Muy bien! Me sirvió el artículo para validar con XHTML 1.0 estricto una página con ventana externa. Muchas gracias.
February 28th, 2007 a las 11:46 pm
[...] Muchos habrán pensado en utilizar una función en javascript con el método window.open directamente. Sin embargo esta opción harÃa imposible la lectura de los enlaces por parte de buscadores como Google. La solución más acertada pasa por un javascript que actúe sobre una clase del enlace, tal y como explican en eslomas.com: [...]
March 10th, 2007 a las 2:52 pm
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!!
April 1st, 2007 a las 11:25 pm
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
May 17th, 2007 a las 12:58 pm
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
May 22nd, 2007 a las 12:00 am
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
May 30th, 2007 a las 5:44 pm
impresionante codigo, muchas gracias
November 21st, 2007 a las 10:10 pm
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.
April 2nd, 2008 a las 10:00 pm
dasdsa saSas
May 23rd, 2008 a las 6:45 pm
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.
July 30th, 2008 a las 3:16 pm
[...] Después de googlear un poco encontré un enlace interesante en EsLoMas.com donde se hablaba a lo largo y tendido de como solucionarlo a través de dos funciones de javascript (una más eficiente que la otra) y que simplemente se aplicarÃan poniendo a un enlace class=”external” (o otro nombre de clase que predefiniéramos). [...]
July 30th, 2008 a las 4:41 pm
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/
October 19th, 2008 a las 8:37 pm
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!!!
December 4th, 2008 a las 11:06 pm
ya u sabe puesto para esto
March 20th, 2009 a las 6:34 pm
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
April 7th, 2009 a las 3:53 pm
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
April 7th, 2009 a las 3:55 pm
el link seria:
——Link: ——-
April 7th, 2009 a las 3:57 pm
bueno…parece que no me lo dejan poner:
July 15th, 2009 a las 3:31 am
Patxi,
Gracias por el script. Añadido al plugin WP Smart Image con su respectivo crédito en el panel.
Saludos!
October 15th, 2009 a las 8:29 pm
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
November 29th, 2009 a las 10:43 pm
Muchas gracias por el post, lo voy a probar ya mismo.
Un saludo
January 29th, 2010 a las 2:08 pm
Muchas Gracias por la aportacion. Un saludo.
March 16th, 2010 a las 1:47 am
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.