Abrir nuevas ventanas

Abrir un vínculo en una nueva ventana es una forma bastante común de agregar información sin tener que abandonar la página donde estamos. La forma más elemental es agregar el atributo target al link:

<a href="pagina.html" target="_blank">TEXTO VINCULO</a>

Sin embargo, es posible tener más control sobre esa nueva ventana y para eso, necesitamos algo de código JavaScript.

Este abre una página en nueva ventana y, este HIPERVINCULO hace exactamente lo mismo.

En ambos casos se ha abierto una ventana conteniendo una página web existente. Este es el código HTML agregado a los tags INPUT y A utilizados:

onclick="abrirNuevaVentana();return false"

y este es el script básico de la función:

function abrirNuevaVentana() {
window.open('página','nombre','opciones');
}

donde la parte más importante es el uso de la función interna window.open() que abre una nueva ventana en el navegador, "pasándole" diferentes url y algunas otras características.

Los parámetros de la función son tres, página contiene la url a abrir, el segundo nombre es el nombre dado a la ventana y el último, opciones son las propiedades dadas a la ventana. Algunas de estas propiedades son:

toolbar = yes | no       ver/ocultar barra de herramientas
menubar = yes | no   ver/ocultar barra de menues
status = yes | no   ver/ocultar barra de estado (Mozilla no lo acepta)
scrollbars = yes | no  ver/ocultar barras de desplazamiento
location = yes | no  ver/ocultar barra de direcciones
directories = yes | no ver/ocultar barra de directorios
resizable = yes | no permitir/negar redimensionamiento
width = pixeles ancho en pixeles
height = pixeles     alto en pixeles
top = pixeles coordenada vertical
left = pixeles            coordenada horizontal

El valor de cada uno siempre es un valor booleano (true/false, yes/no o 1/0) y, por defecto es false/no/0. Todas las opciones se colocan en una sola instrucción, entre comillas, separadas con comas y sin espacio entre ellas.

Un ejemplo cualquiera se vería así:

window.open(url,'name','height=200,width=200,left=10, top=10,
resizable=yes,scrollbars=yes,toolbar=yes,status=yes');

También es posible hacerlo de manera directa, en ese caso, la forma correcta de abrir una ventana pop-up es la siguiente:

<a href="URL_pagina" target="_blank"
onClick="window.open(this.href, this.target, 'width=ancho,height=alto');
   return false;">
BIEN</a>

Una forma errónea:

<a href="#"
onClick="window.open('URL_pagina','nombre','width=ancho,height=alto')">
MAL</a>

donde se usa el atributo href="#" para ver "la manito" y el link subrayado. Funciona pero tiene algunos inconvenientes: muchos usuarios deshabilitan JavaScript y el contenido es inaccesible, los buscadores no reconocen el link, no puede agregarse a los Favoritos (o Marcadores), al pasar el ratón sobre él, no puede verse la dirección de la página a la que nos lleva, solo veremos "#", con el botón derecho ("Abrir en ventana nueva") hará exactamente lo contrario.

Aún peor es utilizar javascript: para utilizar el código directamente desde el href:

<a href="javascript:window.open('pagina','nombre','width=ancho,height=alto');">
PEOR</a>

Al hacer click derecho y "Abrir en una ventana nueva" se abrirá una ventana en blanco y, eventualmente, la pop-up.

A diferencia de los primeros ejemplo, en lugar de definir la dirección de la nueva página dentro de la función window.open, le indicamos que la tome del atributo href del mismo tag (this), con esto, cualquier navegador abrirá la página, sin importar si tiene o no Javascript y, al ser un vínculo normal, podrá ser agregado a favoritos e indexado por los buscadores.