window.open

Para abrir una nueva ventana en javascript tenemos disponible el método open del objeto window.

window.open(url, [name], [features], [replace])

• url es la localización de la página que queremos mostrar.
• name es el nombre que damos a la ventana o uno de los nombres predefinidos.
• features en una lista de elementos separados por comas que permiten personalizar tanto la apariencia como el comportamiento de la nueva ventana.
• replace especifica si la url que pasamos al método crea una nueva entrada en el historial o reemplaza la actual entrada. Este parámetro sólo tiene efecto si url es cargada en la misma ventana.

Un primer ejemplo sería el siguiente:

var win = window.open("http://www.google.es");

var win = window.open("http://www.google.es",”google”);

 

Aunque ambos ejemplos son sencillos, tengo que comentar que sólo Safari abrió una nueva ventana, el resto (IE, Firefox, Chrome y Opera) abrieron una nueva pestaña.

Respecto al parámetro url no hay mucho que decir (salvo que es opcional y este caso sirve para obtener una referencia a una ventana ya abierta por su nombre, es decir, window.open(“”, “miVentana”) devuelve una referencia a una ventana abierta previamente con el nombre “miVentana”). Sin embargo para el parámetro name podemos, bien dar un nombre concreto, bien un nombre predeterminado o bien no especificar ninguno. Cabe aclarar que este nombre no tiene nada que ver con el título de la página. Los nombres predeterminados válidos son:

• _blank
• Nueva ventana. Valor predeterminado.
• _parent
• La nueva ventana se carga en la ventana padre del actual frame y en caso de no estar trabajando con frames, es igual que _self.
• _self
• Nueva ventana en la ventana actual.
• _top
• La nueva ventana reemplaza todos los frames que hubiera en la actual ventana, aunque en caso de no estar trabajando con frames es igual que _self.

Si damos un nombre a la página, este nombre nos puede servir para varios propósitos:

• Ser destino de navegación de enlaces o formularios, a través del atributo target.
• Abrir nuevas ventanas en una misma ventana. Es decir, 2 o más open con el mismo nombre crearán sólo 1 ventana donde se reemplazará la localización a través del parámetro url.

En cuanto al parámetro features y aunque el enlace del msdn o también de mozilla ofrezca muchos más atributos, pienso que son sólo relevantes los siguientes (he puesto en negrita los valores predeterminados):

• fullscreen = { yes | no | 1 | 0 }.
• height = número
• left = número
• location = { yes | no | 1 | 0 }, se refiere a la barra de navegación.
• menubar = { yes | no | 1 | 0 }, se refiere a la barra de menús.
• resizable = { yes | no | 1 | 0 }.
• scrollbars = { yes | no | 1 | 0 }.
• status = { yes | no | 1 | 0 }, se refiere a la barra de estado.
• toolbar = { yes | no | 1 | 0 }, se refiere a la barra de comandos.
• top = número
• width = número

El formato del parámetro features es “clave=valor,clave=valor,…”

El método open devuelve una referencia a la nueva ventana creada (que podría ser null si hubo algún problema durante su creación) que servirá posteriormente para poder acceder las propiedades y métodos de la nueva ventana desde la ventana que la abrió.

Otras propiedades relativas al manejo de ventanas son:

• Propiedad opener, sólo disponible en una ventana abierta con window.open. Devuelve una referencia a la ventana que abrió la actual ventana.
• Propiedad closed, indica si la ventana ha sido cerrada (esto sirve tanto desde la ventana padre a la ventaja hija – a través de la referencia que devolvió window.open – como desde la ventaja hija a ventana padre – a través de window.opener)
• Propiedad name, devuelve el nombre de la ventana.

Aunque antes lo mencionamos de pasada, excepto Safari, el resto de navegadores abrieron una nueva ventana en una pestaña, así que ¿Cómo podemos abrir una nueva ventana en una ventana en vez de en una pestaña? http://stackoverflow.com/questions/726761/javascript-open-in-a-new-window-not-tab A mí personalmente la solución que me ha funcionado ha sido especificar height y width en el parámetro features.

Otra práctica que podría resultarnos útil es abrir una nueva ventana y desde esta nueva ventana (la ventana hija) llamar a código de la ventana padre. Para ello debemos detectar si todavía esta abierta la ventana padre y además saber el nombre de una función definida en la ventana padre:

if (!window.opener || window.opener.closed) {

   window.close();

   return;

}

window.opener.funcionDefinidaEnVentanaPadre();

window.close();

 

La verdad es que este post podría ser mucho más extenso y detallado, pero yo creo que con este anticipo cualquiera ya puede enfrentarse al manejo de ventanas en un navegador.

Un saludo!