Cómo abrir una nueva ventana en un navegador usando JavaScript en HTML. Mostramos un ejemplo de código HTML y JavaScript que permite abrir una ventana, imprimir la ventana actual y mostrar datos tales como el tamaño de la ventana, el idioma del navegador, el tipo de navegador, la ruta y la URL de la página actual.

Ejemplo HTML y JavaScript para mostrar ventana emergente, cambiar tamaño, cerrar ventana, imprimir

En el ejemplo siguiente de HTML y JavaScript, mostraremos varios botones al usuario para que pueda realizar lo siguiente:

  • Crear ventana: creará y mostrará una ventana nueva en el navegador, con el tamaño 400×350. Sin datos, vacía.
  • Cambiar tamaño de la ventana: cambiará el tamaño de la ventana anterior creada a 640×480.
  • Imprimir la página actual: mostrará el cuadro de diálogo de impresión de página en el navegador.
  • Mostrar datos: mostrará, si la ventana se ha creado, una serie de datos como el tamaño de la página principal, el navegador, el idioma, el path y la URL.
  • Modificar datos en ventana: si la ventana emergente está abierta y si se ha pulsado en «Mostrar datos», este botón modificará uno de los <p> con ID textoModificar de la ventana emergente, a modo de ejemplo, modificando su texto.
  • Cerrar ventana: si está abierta la ventana emergente, se cerrará.

El código HTML y JavaScript del ejemplo será:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

Para probar el código anterior, lo guardaremos en un fichero llamado, por ejemplo, ventana.html y colocaremos este fichero en nuestro servidor web. El nombre del fichero no tiene por qué coincidir, para este caso, con el nombre de la variable «ventana» del código anterior.

Al abrirlo en un navegador (por ejemplo Mozilla Firefox), nos mostrará esta página:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

Si pulsamos en el botón «Crear ventana», se abrirá una nueva ventana con el tamaño 400×350, en principio vacía:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

La dejamos abierta y ahora, desde la página principal, pulsamos en «Mostrar datos», veremos que se muestran unos datos en la ventana vacía abierta:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

Si pulsamos el botón «Cerrar ventana», tanto de la ventana emergente como el botón de la página principal, la ventana se cerrará y nos mostrará el mensaje en la parte inferior de la página principal:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

Si pulsamos en los botones Cerrar ventana, Cambiar tamaño de la ventana o Mostrar datos sin que la ventana se haya creado (con el botón Crear ventana) lo indicará en la zona de aviso:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

Si volvemos a crear la ventana, pulsando en «Crear ventana» y pulsamos en «Cambiar tamaño de la ventana», cambiará su tamaño, pasando de 400×350 a 600×480.

Siguiendo con las pruebas, si abrimos la ventana emergente y pulsamos en «Mostrar datos», nos mostrará, como hemos comprobado anteriormente, esta ventana:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

Si ahora pulsamos en «Modificar datos en ventana», veremos que cambia el texto de la ventana emergente anterior «Ejemplo para modificar texto» por este otro texto:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente

Nos servirá de ejemplo para cambiar propiedades de objetos de una ventana en otra.

Si pulsamos el botón «Imprimir la página actual», el navegador nos abrirá la ventana para imprimir en PDF o impresora la página principal:

Probando ejemplo HTML y JavaScript para mostrar ventana emergente